Twitter Bootstrap3:通过点击和自动获取当前的轮播索引号

时间:2017-09-09 22:16:40

标签: javascript jquery twitter-bootstrap carousel

在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 carouse control中我获得了当前的数字索引并对其做了一些事情。

$(".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()都会运行。

我该如何控制它?

1 个答案:

答案 0 :(得分:0)

您必须删除右键和左键单击事件中的animateborder功能。 在小提琴控制台中查看它。在右键或左键单击事件中没有console.log(&#34; animateborderf&#34;)但是,当您单击它们时它会触发。 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");

});

情况是当用户点击向右或向左按钮,轮播幻灯片以及当轮播幻灯片滑动时.bs.carousel事件正在触发。所以animateborder函数会在你的代码中调用两次。

编辑: https://jsfiddle.net/h73yp2o3/2/我想这更好。