Problem:
Bootstrap Carousel is an easy and convenient option for implementing a slider on your website. But is there a way to advance the slides with different time intervals. For example, slide 1 will advance after 10 seconds, the second slide after 5 seconds and slide 3 to advance after 3 seconds. I came across a scirpting suggestion using the the carousel method with the 'pause' parameter. i.e. Pausing the slide advancing for amount of time computed as the slide timer as reduced by a the interval. But for some reasons this solution wasn't working for me. But I could have it working with a different approach, which is explained below, so that this will be useful for others as well.
Solution:
Instead of using the pause attribute, I tried using a script to advance the slides. i.e. advance the slides manually by calling carousel method the 'next' attribute. This can be accomplished in combination with the setTimeOut function. For e-g, something like this should help in having this working.
var t;
var start = $('#myCarousel').find('.active').attr('data-interval');
t = setTimeout(function () { $('#myCarousel').carousel('next') }, start);
The block above will ensure that the first slide advances after the interval set for the first slide. Subsequent slide advances can be hanlded using the slid event as below.
$('#myCarousel').on('slid.bs.carousel', function () {
clearTimeout(t);
var duration = $('#myCarousel').find('.active').attr('data-interval');
t = setTimeout("$('#myCarousel').carousel('next');", duration);
})
Hope this helps. Please to note that to have this working, use the data-interval attribute and set the desired interval in milli-seconds for each slide. e-g.
I have found this working fine with a single Carousel in the same page and have not tested this with multiple Carousels in the same page.
<div class="item" data-interval="4000">
I have found this working fine with a single Carousel in the same page and have not tested this with multiple Carousels in the same page.