Twitter Bootstrap Carousel slide duration

Question

In the Twitter Bootstrap Carousel, how can I make a particular slide to have a different duration than others?

I can change the whole slider duration with the \"inte

Answer 1

I could not get carousel('pause') to work at all inside the bootstrap event handlers. I'm not sure why - potentially it was due to dynamically rendering the slides with KnockoutJS or perhaps a bug in Bootstrap (I'm guessing it's my code).

So in order to set an individual slide's interval independent of it's friends in the carousel I used the slid.bs.carousel event bubbled up in Bootstrap along with using setTimeout to set the interval based on the item's data-interval attribute and manually calling the carousel('next') method.

JS

// slide event
$('.carousel').on('slid.bs.carousel', function () {
    var carouselData = $(this).data('bs.carousel');
    var currentIndex = carouselData.getActiveIndex();

    window.setTimeout(function() {
        $('.carousel').carousel('next');
    }, $(carouselData.$items[currentIndex]).data('interval'));
});

// init carousel
$('.carousel').carousel({
    interval: false
});

// set initial timeout for active slide data-interval
window.setTimeout(function () {
    $('.carousel').carousel('next');
}, $('.carousel .active').data('interval'));

HTML

  

    
{{content}}
    
{{content}}
    
{{content}}
  

In this example #slide1 will be the initial slide in your carousel and show for 5 seconds. After 5 seconds it will slide to #slide2.

#slide2 will pause for 10 seconds before sliding to #slide3. And so on. And so on...