Bootstrap Carousel - Different intervals for differnet slides

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.

    <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.