Question

要在图像之间来回循环，我使用的是数据属性“wrap”

data-wrap="true"

这对我来说很好，但我也想只自动加载一次循环然后它应该停止。如果我这样做：

data-wrap="false"

它会做到这一点。 但问题是我希望轮播只在页面加载时循环一次然后停止，同时仍然能够使用下一个和上一个按钮在图像之间来回循环

.i.e。

当滑块到达最后一张图像时，进一步点击下一张图像应该转动第一张图像，类似于第一张图像，如果点击上一张图像则应该打开最后一张图像。

我确实尝试添加数据属性“间隔”，但它也会停止自动循环。

这是我到目前为止所尝试过的，但对我来说并不适用。

  var slide_counter   = 0,
        slider_1        = jQuery('#carousel-example-generic1'),
        slider_2        = jQuery('#carousel-example-generic2');

    slider_1.on('slide.bs.carousel', function(){
        slide_counter++;

        if(slide_counter == 3){

            slider_1.carousel({
                interval: false
            });

            slider_2.carousel({
                interval: false
            });
            //slider_1.attr('data-interval', 'false');
            //slider_2.attr('data-interval', 'false');
        } // end if
    });

第二个想法：

var slider_1        = jQuery('#carousel-example-generic1'),
    slider_2        = jQuery('#carousel-example-generic2');

if(slider_1.carousel(2)){
    jQuery('#carousel-example-generic1, #carousel-example-generic2').carousel({
        interval: false
    });

} // end if

Answer 1

我会尝试以下内容。我为逻辑添加了评论。

    //listener for after slide
$('#myCarousel').on('slid.bs.carousel', function () {
   //Each slide has a .item class to it, you can get the total number of slides like this
    var totalItems = $('.item').length;

  //find current slide number
    var currentIndex = $('div.active').index() + 1;

  //if slide number is last then stop carousel
  if(totalItems == currentIndex){
        $('.carousel').carousel({
          interval: false
    })
  }

})

Answer 2

这是一个老问题，但是对于其他人来看这篇文章找到答案：

var $carousel = $('#myCarousel');
$carousel.on('slid.bs.carousel', function (e) {
    if($(e.target).find('.item.active').is(':last-child')) {
        $carousel.carousel('pause');
    }
});

只需保留wrap选项true即可使其正常运行。

Bootstrap Carousel：需要自动循环一次但下一个和之前的按钮应循环滑动

2 个答案: