在 bootstrap3 最新版本中,轮播中有 4 个项目:
<!-- Carousel nav -->
<a class="carousel-control left" href="#carousel" data-slide="prev"><i class="fa fa-chevron-left" aria-hidden="true"></i></a>
<a class="carousel-control right" href="#carousel" data-slide="next"><i class="fa fa-chevron-right" aria-hidden="true"></i></a>
在右轮播控件
中,我获取当前数字索引并用它做一些事情。
$(".right").click(function(){
idx = $('.carousel-inner div.active').index()+1;
if(idx == 4) idx = 0;
animateBorder(idx);
});
也适用于左侧:
$(".left").click(function(){
idx = $('.carousel-inner div.active').index()-1;
if(idx == -1) idx = 3;
animateBorder(idx);
});
效果很好。
所以我想使用 animateBorder()
函数来自动更改幻灯片。
我用这个:
$('#carousel').on('slide.bs.carousel', function() {
idx = $('.carousel-inner div.active').index() + 1;
if(idx == 4) idx = 0;
animateBorder(idx);
});
效果很好。
但是当我单击左侧按钮时,第二个和第三个代码中的 animateBorder() 都会运行。
如何控制它?
最佳答案
您必须删除右键单击和左键单击事件中的 animateborder 函数。 在 fiddle 控制台中检查一下。右键或左键单击事件中没有 console.log("animateborderf") ,但是当您单击它们时它会触发。 https://jsfiddle.net/h73yp2o3/
$(".right").click(function(){
idx = $('.carousel-inner div.active').index()+1;
if(idx == 4) idx = 0;
});
$(".left").click(function(){
idx = $('.carousel-inner div.active').index()+1;
if(idx == 4) idx = 0;
});
$('#myCarousel').on('slide.bs.carousel', function() {
idx = $('.carousel-inner div.active').index() + 1;
if(idx == 4) idx = 0;
console.log("animateborderf");
});
情况是,当用户单击右键或左键时,轮播会滑动,并且当轮播滑动时,将触发 Slide.bs.carousel 事件。因此 animateborder 函数在您的代码中调用了两次。
编辑: https://jsfiddle.net/h73yp2o3/2/我想这更好。
关于javascript - 推特 Bootstrap3 : get current carousel index number via clicking and automatic,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46135593/