Bootstrap - set different interval on each carousel item [duplicate]

Answer 1

The approach you have followed is correct but you need to capture sliding event of twitter-bootstrap carousel to make it work as below:

DEMO

var t;
var start = $('#myCarousel').find('.active').attr('data-interval');
t = setTimeout(function(){
         $('#myCarousel').carousel({interval: 1000})
    }, start-1000);

$('#myCarousel').on('slid.bs.carousel', function () {   
     clearTimeout(t);  
     var duration = $(this).find('.active').attr('data-interval');

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

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

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

For more detailed version visit Original Answer