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

First of all, thank you @paulalexandru. Your code at first didn't work for me, however making some changes, I was able to achieve the expected result. The main issue was related to the element not finding the duration-interval, so I used javascript instead of jquery (I'm still a beginner on it). So the following code worked for me (I'm keeping the old code as comment)

var t;
//var start = $('#myCarousel').find('.active').attr('data-interval');
var start = document.getElementsByClassName("item active")[0].getAttribute("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');
    var duration = document.getElementsByClassName("item active")[0].getAttribute("data-interval");

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

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

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

The HTML

    

        
            

                

                    
My title
                    
My description text.