上幻灯片后，自举旋转木马禁用克隆

Question

你好所有这些代码都适合我 - 除了一件事 - 我想在上一张幻灯片（第6幻灯片）时停止它，但他要克隆1、2和3个幻灯片（取决于分辨率），然后停止。我是Java脚本的初学者，找不到解决方案。请注意任何人：

html

<div id="package" class="carousel carousel-showmanymoveone slide row" data-ride="carousel">
            <div class="carousel-inner">
                <div class="item active">
                    <div class="col-xs-6 col-sm-4 col-xl-3"><a href="#"><img src="http://placehold.it/500/0054A6/fff/&amp;text=1" class="img-responsive"></a></div>
                </div>
                <div class="item">
                    <div class="col-xs-6 col-sm-4 col-xl-3"><a href="#"><img src="http://placehold.it/500/0054A6/fff/&amp;text=2" class="img-responsive"></a></div>
                </div>
                <div class="item">
                    <div class="col-xs-6 col-sm-4 col-xl-3"><a href="#"><img src="http://placehold.it/500/0054A6/fff/&amp;text=3" class="img-responsive"></a></div>
                </div>
                <div class="item">
                    <div class="col-xs-6 col-sm-4 col-xl-3"><a href="#"><img src="http://placehold.it/500/0054A6/fff/&amp;text=4" class="img-responsive"></a></div>
                </div>
                <div class="item">
                    <div class="col-xs-6 col-sm-4 col-xl-3"><a href="#"><img src="http://placehold.it/500/0054A6/fff/&amp;text=5" class="img-responsive"></a></div>
                </div>
                <div class="item">
                    <div class="col-xs-6 col-sm-4 col-xl-3"><a href="#"><img src="http://placehold.it/500/0054A6/fff/&amp;text=6" class="img-responsive"></a></div>
                </div>
            </div>
            <a class="left carousel-control" href="#package" data-slide="prev"><i class="glyphicon glyphicon-chevron-left strel"></i></a>
            <a class="right carousel-control" href="#package" data-slide="next"><i class="glyphicon glyphicon-chevron-right strel"></i></a> 
        </div>

javascript

(function(){
  // setup your carousels as you normally would using JS
  // or via data attributes according to the documentation
  // http://getbootstrap.com/javascript/#carousel
  $('#package').carousel({ interval: false, pause:true });
}());
(function(){
  $('.carousel-showmanymoveone .item').each(function(){
    var itemToClone = $(this);
    for (var i=1;i<4;i++) {
      itemToClone = itemToClone.next();

      // wrap around if at end of item collection
      if (!itemToClone.length) {
        itemToClone = $(this).siblings(':first');
      }

      // grab item, clone, add marker class, add to collection
      itemToClone.children(':first-child').clone()
        .addClass("cloneditem-"+(i))
        .appendTo($(this));

      //listener for after slide
        jQuery('.carousel-showmanymoveone').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 = jQuery('.carousel-showmanymoveone .item').length;
      //find current slide number
            var currentIndex = jQuery('.carousel-showmanymoveone .item div.active').index() + 1;
      //if slide number is last then stop carousel
          if(totalItems == currentIndex){
            clearInterval(jQuery('.carousel-showmanymoveone .item').data('bs.carousel').interval);
          } // end of if
   });
    }
  });
}()); 

Answer 1

将wrap选项设置为false会使轮播自动停止骑自动。

$('#package').carousel({
  interval: 1000,
  wrap: false
});

另外，您可以在轮播的HTML

中使用data-wrap="false"

编辑

您可以使用此代码检测first和last滑动：

$('#package').on('slid.bs.carousel', '', function() {
  var $this = $(this);
  if($('.carousel-inner .item:first').hasClass('active')) {
    console.log('first slide');
  } else if($('.carousel-inner .item:last').hasClass('active')) {
    console.log('last slide');
  }
});