javascript - example - carousel jquery

Twitter Bootstrap Carousel reproducción automática en carga

Question

Usando el marco bootstrap de Twitter, ¿cómo es posible invocar el carrusel para ''deslizar automáticamente''? Es decir, cuando se carga la página, el carrusel se desplaza automáticamente.

He probado una función de clic onLoav de javascript para la <a> del siguiente enlace, pero esto no funcionó.

Answer 1

Debe hacer lo que dice la documentación de Bootstrap de Twitter sobre Carousel, así que configure el primer elemento de la diapositiva de Carrusel con class = "active" e inicialice el js para el carrusel de esta manera:

$(function(){
    $(''.carousel'').carousel({
      interval: 2000
    });
});

luego, si no es suficiente (pero esto nunca me sucedió) use la fuerza bruta que activa el clic, desplace los botones de control del carrusel de esta manera:

$(function(){
$(''.carousel'').carousel({
      interval: 2000
    });
$(''.carousel-control.right'').trigger(''click'');
});

¡Pero esto es solo un truco que no es necesario, en realidad, solo sigue la documentación!

Answer 2

Póngalo en el bloque de documentos listos para que se inicie automáticamente

$(document).ready(function() {
$(''#myCarousel'').carousel();
});

Answer 3

Puede utilizar el atributo de intervalo de datos en el marcado html para la reproducción automática:

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel"  data-interval="5000">

intervalo de datos : la cantidad de tiempo en milisegundos para demorar entre el ciclo automático de un elemento. Si es falso, el carrusel no ciclará automáticamente.

Answer 4

Según los documentos , debe inicializar el complemento Carousel a través de JavaScript. El ejemplo de carrusel en la página de documentación oficial de Bootstrap se inicializa en el archivo application.js en las líneas 67-68:

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

lo que le da la configuración por defecto.

Si desea especificar el intervalo de ciclo, puede establecer la propiedad de interval en milisegundos:

$(''.carousel'').carousel({
  interval: 2000
})

Answer 5

Sencillo. Te estás perdiendo el atributo "data-ride" en la div.

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">

Answer 6

Simplemente agregue la clase "diapositiva" a la etiqueta div carrusel, así:

<div class="carousel slide" id="this-carousel-id">

Answer 7

<div id="myCarousel" class="carousel slide" data-ride="carousel"> funciona para mí, lo que me faltaba era el atributo data-ride.

Espero que esto ayude a muchas personas. Gracias , me has sido muy útil en la mayoría de los casos. Me alegra que esta comunidad exista.

Answer 8

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

Usted necesita añadir

data-ride="carousel"

<header id="myCarousel" class="carousel slide" data-ride="carousel">