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

两种解决方案都会产生完全相同的效果。

自动播放时，twitter-bootstrap轮播导航和内容不同步

1 个答案: