我找到了 twitter-bootstrap 的一个片段,用于制作带有选项卡式导航的轮播。 除了“自动播放”之外,一切正常。
我希望轮播能够自行滑动,所以我用 data-interval="1000"
指定了轮播的时间间隔
问题:轮播导航选项卡与幻灯片不同步。幻灯片按预期播放动画,但选项卡保持不变。
是否有一种简洁的方法可以使选项卡与幻灯片同步更改?
演示: http://jsfiddle.net/35DGj/
感谢您的帮助
最佳答案
您必须使用'slid.bs.carousel'
事件。
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 解决方案: 编辑
替代解决方案:
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');
})
});
两种解决方案都会产生完全相同的效果。
关于javascript - 自动播放时 twitter-bootstrap 轮播导航和内容不同步,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22428544/