twitter-bootstrap carousel nav and content are not synchronized when autoplay

Question

I found a snippet for twitter-bootstrap to make a carousel with tabbed navigation. Everything works fine except the "autoplay".

I want the carousel to slide by itself, so I specified a time interval for the carousel with data-interval="1000"

Problem: the carousel navigation tabs are not synchronized with the slides. The slides are animating as expected but the tab stays the same.

Is there a clean way to make the tabs change in sync with the slides?

DEMO: http://jsfiddle.net/35DGj/

thanks for your help

Answer 1

You have to use the 'slid.bs.carousel' event.

Fiddle : http://jsfiddle.net/35DGj/1/

JS :

$(document).ready(function(ev){
    $('#custom_carousel .controls a').on('click',function(){
        $('#custom_carousel .controls li.active').removeClass('active');
        $(this).parent('li').addClass('active');
    });
    $('#custom_carousel').on('slid.bs.carousel',function(){
            var j = $('.carousel-inner .item.active').index();
            $('.controls .nav li').removeClass('active').eq(j).addClass('active');
    });
});

SpidrJeru Solution : EDIT

alternative solution:

JS

 $(document).ready(function(ev){
    $('#custom_carousel').on('slide.bs.carousel', function (evt) {
      $('#custom_carousel .controls li.active').removeClass('active');
      $('#custom_carousel .controls li:eq('+$(evt.relatedTarget).index()+')').addClass('active');
    })
});

both solutions result in the exact same effect.