Different slide duration for each item on bootstrap 3.1 carousel

Question

I am trying to have different duration for each slide as my some slides have large content and some small please give me a solution with fiddle

I tried this but it o

Answer 1

For some reason, the pause method did seem to work for me. So, I used the following code and it worked for me. This works even if you have multiple carousels on the same page. This approach however requires the data-interval attribute mandatory against each carousel item.

var t;
var start = $('#myCarousel').find('.active').attr('data-interval');

t = setTimeout(function () {
    $('#myCarousel').carousel('next')
}, start);

$('#myCarousel').on('slid.bs.carousel', function () {

    clearTimeout(t);
    var duration = $('#myCarousel').find('.active').attr('data-interval');

    //$('#myCarousel').carousel('pause');
    t = setTimeout("$('#myCarousel').carousel('next');", duration);
})

$('.carousel-control.right').on('click', function () {
    clearTimeout(t);
});

$('.carousel-control.left').on('click', function () {
    clearTimeout(t);
});