javascript - examples - Twitter Bootstrap Carousel Slide no funciona

slider con texto bootstrap

Question

Estoy intentando implementar el complemento de Twitter Bootstrap Carousel. Se ve y se autocicla correctamente, pero el efecto de deslizamiento entre los elementos no funciona. Simplemente reemplaza estáticamente un elemento con el siguiente. Si bien es funcional, este es un UX poco agradable. ¿Pensamientos?

<div class="span7">
        <div id="myCarousel" class="carousel slide">
          <div class="carousel-inner">
            <div class="item active">
              <img src="img/CoachellaValley.png" alt="">
              <div class="carousel-caption">
                <h4>Sponsor 1</h4>
              </div>
            </div>
            <div class="item">
              <img src="img/CoachellaValley2.png" alt="">
              <div class="carousel-caption">
                <h4>Sponsor 2</h4>
              </div>
            </div>
            <div class="item">
              <img src="img/CoachellaValley3.png" alt="">
              <div class="carousel-caption">
                <h4>Sponsor 3</h4>
              </div>
            </div>
          </div>
          <a class="left carousel-control" href="#myCarousel" data-slide="prev">&lsaquo;</a>
          <a class="right carousel-control" href="#myCarousel" data-slide="next">&rsaquo;</a>
        </div>
      </div>
[...]
<script src="js/bootstrap.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/bootstrap-collapse.js"></script>
<script src="js/bootstrap-carousel.js"></script>
<script type="text/javascript">
  $(function(){
    $(''#myCarousel'').carousel();
  })
  </script>

Answer 1

Prueba esto:

Elimine todos los siguientes scripts js que ha cargado en su documento:

<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap-collapse.js"></script>
<script src="js/bootstrap-carousel.js"></script>

Y solo mantén lo siguiente en el mismo orden (jQuery va primero)

<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/bootstrap.js"></script>

El problema es que, aparte de cargar los mismos archivos de script varias veces (el archivo bootstrap js ya tiene todos los complementos incluidos, así que no es necesario incluir la versión mínima (guárdela para producción ahora) o los archivos de script separados) , no está cargando el script de transición incluido dentro del archivo bootstrap.js debido al orden en que se cargan sus scripts.

Answer 2

La oferta es si estoy usando class="carousel" para el contenedor de carrusel y

$(''.carousel'').carousel(''slide'',{interval:1000});

funciona solo por un clic izquierdo / derecho y funciona bastante bien (pero solo por una vez).

Si usa class="carousel slide" y

$(''.carousel .slide'').carousel(''slide'',{interval:1000});

luego, cambio de carrusel pero sin efecto de animación de diapositivas.

Answer 3

Después de luchar con esto por un tiempo, he encontrado una solución , solo necesitas incluir

bootstrap-transition.js

y la animación de diapositivas funcionará.

Answer 4

Tu código es correcto. En mi sistema este código funciona bien ...

No existe una definición para la clase "diapositiva" en Bootstrap 3. Pero sin la clase "Diapositiva", las imágenes del carrusel cambiarán sin ningún efecto de animación.

Agregue este script en su código

<script>
    $(document).ready(function () {
        $(''.carousel'').carousel();
    });
</script>

Verifique la referencia de Bootstrap CSS y JS en su código ... y también verifique el orden de los archivos de referencia.

Puedes seguir este orden:

1. bootstrap.css
2. bootstrap-theme.css
3. jquery-1.9.1.js
4. bootstrap.js

El bloque de script no funcionará sin la biblioteca de JQ ... Por lo tanto, agregue el archivo de la biblioteca de JQ correctamente.

Y asegúrese de que el archivo JQ cargado antes de que el script funcione ... Para eso puede agregar la referencia en la parte superior de su página

Answer 5

A pesar de que esta pregunta fue respondida con éxito, vine aquí en busca de una respuesta a un problema similar.

Mi primer artículo en el carrusel se deslizaba hacia la izquierda, como de costumbre, pero el segundo elemento no estaba detrás. Una vez que el primer elemento estaba fuera de la pantalla, el segundo elemento simplemente aparecería, no se deslizaría. Luego desaparecería y el primer elemento se deslizaría correctamente.

Si tiene este problema, verifique que no tenga posición: relativa; en el .item div.

Yo agregué eso así:

.carousel-inner > .item {
    position:relative;
    height:495px;
}

Resulta que eso arruina las cosas. Deshacer la posición: relativa; arregló el problema Ahora el deslizamiento es suave y correcto.