javascript - 如何停止轮播中的无限循环？

我为示例电子商务网站的产品滑动创建了一个轮播，它可以正常运行，但可以无限循环运行，但是我想在最后一个产品出现时停止该滑块。我已经尝试过data-wrap="false"，但是它不起作用。请帮助我。Trying to achieve product slider present on this site

jQuery查询

$('#myCarousel').carousel({
    interval: 000
})

$('#myCarousel1').carousel({
    interval: 000
})

$('#myCarousel2').carousel({
    interval: 000
})

$('#myCarousel3').carousel({
    interval: 000
})

$('#myCarousel4').carousel({
    interval: 000
})

$('#myCarousel5').carousel({
    interval: 000
})
$('#myCarousel6').carousel({
    interval: 000
})
$('.carousel .item').each(function(){
    var next = $(this).next();
    if (!next.length) {
        next = $(this).siblings(':first');
    }
    next.children(':first-child').clone().appendTo($(this));

    for (var i=0;i<2;i++) {
        next=next.next();
        if (!next.length) {
            next = $(this).siblings(':first');
        }

        next.children(':first-child').clone().appendTo($(this));
    }
});

的HTML

    <div class="carousel slide" id="myCarousel" data-ride="carousel" data-interval="000" data-pause="hover" data-wrap="false">
            <div class="carousel-inner">
                <div class="item active ">
                    <div class="col-xs-3"><a href="mobile/samsung/samsung.html"><img src="images/s8.png" class="img-responsive thumb"></a>

                        <h3>
                            Smartphones
                        </h3>
                    </div>
                </div>

                <div class="item">
                    <div class="col-xs-3"><a href="mobile/nokia/nokia.html"><img src="images/n9.jpg" class="img-responsive thumb"></a>
                        <h3>
                            Feature Phones
                        </h3>
                    </div>
                </div>

                <div class="item">
                    <div class="col-xs-3"><a href="mobile/nokia/nokia.html"><img src="images/n9.jpg" class="img-responsive thumb"></a>
                        <h3>
                            Screen Protectors
                        </h3>
                    </div>
                </div>
            </div>
            <a class="left carousel-control" href="#myCarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
            <a class="right carousel-control" href="#myCarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
        </div>
    </div>

最佳答案

尝试一下

 $(document).ready(function() {
    $('#myCarousel').carousel({
    interval: 1000,
      wrap: false
    })

    $('#myCarousel').on('slid.bs.carousel', function() {
        //alert("slid");
    });


  $('#myCarousel').on('slid.bs.carousel', '', function() {
      var $this = $(this);

      $this.children('.carousel-control').show();

      if($('.carousel-inner .item:first').hasClass('active')) {
        $this.children('.left.carousel-control').hide();
      } else if($('.carousel-inner .item:last').hasClass('active')) {
        $this.children('.right.carousel-control').hide();
      }

    });

});

关于javascript - 如何停止轮播中的无限循环？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/49829589/