自動播放時，twitter-bootstrap輪播導航和內容不同步

Question

我找到了一個用於twitter-bootstrap的代碼片段，以制作帶有選項卡式導航的輪播。 除“自動播放”外，其他所有功能均正常。

我希望輪播自己滑動，所以我為輪播指定了一個時間間隔， data-interval="1000"

問題：輪播導航選項卡與幻燈片不同步。 幻燈片按預期進行動畫處理，但選項卡保持不變。

有沒有一種干凈的方法可以使選項卡與幻燈片同步更改？

演示： http : //jsfiddle.net/35DGj/

謝謝你的幫助

Answer 1

您必須使用'slid.bs.carousel'事件。

小提琴 ： 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解決方案：編輯

替代解決方案 ：

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');
    })
});

兩種解決方案都會產生完全相同的效果。