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'); } });

Bootstrap Carousel在最后一次幻灯片后禁用克隆

1 个答案: