2012-05-18 21 views
23

Me encontré con un problema interesante. Estoy bastante seguro de que la respuesta es muy simple, pero no pude entenderlo, así que pensé en buscar ayuda.Twitter Bootstrap Carrusel no deslizante

Básicamente, mi carrusel no se desliza. Simplemente cambia de imagen. Incluso traté de copiar el HTML exacto del sitio de arranque en mi propia página y todavía no se desliza. En application.js, la inicialización tampoco tiene argumento.

// carousel demo 
$('#myCarousel').carousel() 

noto que las clases next y prev se añaden a cada elemento al hacer clic en el botón siguiente/pref, pero no parece hacer lo mismo en la mía. No vi nada mal cuando depuré cualquiera.

¿Qué me estoy perdiendo? Probé esto en los últimos Chrome y Safari.

+2

'Básicamente, mi carrusel no se desliza. Simplemente cambia la imagen. Entonces, ¿el carrusel "funciona", simplemente no con el efecto de deslizamiento? –

+8

Solo para aclarar, el carrusel está funcionando, pero el efecto de deslizamiento no está allí. Acabo de descubrir que también debe incluir bootstrap-transition.js para cualquier animación y asegúrese de agregar una clase llamada "diapositiva" en el div que se utiliza como contenedor para el carrusel. No puedo responder mi propia pregunta hasta 8 horas después, pero esta es la respuesta a la pregunta. – juminoz

Respuesta

44

también hay que añadir bootstrap-transition para el deslizamiento a trabajar, así:

<script src="twitter-bootstrap-v2/docs/assets/js/bootstrap-transition.js"></script> 
+3

Esto solo es cierto cuando se usa la versión no ministrada de bootstrap.js. El minificado incluye el código de transición. –

+0

La sugerencia anterior de @MichaelTeper es mi ganador, resolvió mi problema. Upvoted. Merece ser una respuesta independiente. Gracias Michael. – user776686

24

que estaba teniendo el mismo problema, pero con la v2.0.3 de arranque (que ha incluido en Transición), terminó de adquirir esta clase de diapositivas para el div carrusel

<div id="myCarousel" class="carousel slide"> 

continuación, que acaba de llamar:

$('#myCarousel').carousel(); 
+0

Si está utilizando el bootstrap 1.x, intente con el bootstrap 2.x, lo arregló para mí – niico

+0

Agregando la clase 'slide' también trabajada para mí en bootstrap 3. – neno

0

¿Acabas de poner ese JavaScript en una etiqueta <script>?

<script> 
    $('.carousel').carousel({ 
     interval: 1000 
    })​; 
</script> 
-2

verificación de los archivos CSS que haya incluido. Pruebe y agregue el archivo bootstrap.css además de bootstrap.min.css. Funcionó para mí

Cuestiones relacionadas