Bootstrap Carousel在上一张幻灯片后禁用克隆

Question

Hello All these codes working ok for me except one thing - I'd like to stop it when is come to last slide ( 6th slide ) but he is going to clone 1 , 2 and 3 more slides (depends of resolution) and after that it's stops. I am beginner in java script and cannot find solution..Please anyone:

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

Setting the wrap option to false makes the carousel to stop cycling automatically.

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

Also, you can use data-wrap="false" in the carousel's HTML

EDIT

You can detect first and last slide with this code:

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

});