Twitter Bootstrap Carousel Autoplay On Load

Using the twitter bootstrap framework, how is it possible to invoke the carousel to 'auto slide.' Meaning when the page loads, the carousel automatically scrolls. I have tried a ja

Solution 1:

you should do as the Twitter Bootstrap Documentation says about Carousel, so set the first Carousel slide item with class="active" and initialize the js for the carousel in this way:

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

then if it's not enough (but this never happened to me) use the bruteforce triggering the click hover the carousel control buttons like this:

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

but this is just a not-needed trick, really, just follow the documentantion!

Solution 2:

Simple. You're missing the "data-ride" attribute in the div.

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

Solution 3:

As per the docs, you need to initialize the Carousel plugin via JavaScript. The carousel example on the official Bootstrap documentation page is initialized in the application.js file on lines 67-68:

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

which gives it the default settings.

If you want to specify the cycle interval, you can set the interval property in milliseconds:

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

Solution 4:

Put it in the document-ready-block make it auto-start for me

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

Solution 5:

<div id="myCarousel" class="carousel slide" data-ride="carousel"> works for me, what I have been missing was the data-ride attribute.

I hope this will help a lot of people. Thank you stackoverflow, you have been very useful to me on most grounds. Am glad this community exists.