Question

我正在使用bootstrap carousel滑块，现在我的滑块重复所有时间。当项目数小于3时，我需要停止重复项目。我尝试过下面的脚本。任何人都帮助我实现这一目标。

    <div id="carousel" class="carousel slide" data-ride="carousel" data-interval="false">
    <div class="carousel-inner">
        <div class="item active">
            <img src="images/homogeneous/marvel-stone/marvel-stone-detail.jpg" alt="">
        </div>
    </div>
</div>
<div class="clearfix">
    <div id="myCarousel" class="carousel slide" data-interval="false">
        <div class="carousel-inner">
            <div class="item active">                
                <div class="thumb"><img src="images/homogeneous/marvel-stone/marvel-stone-thumb1.png" alt=""></div>
            </div>
            <div class="item">
                <div class="thumb"><img src="images/homogeneous/marvel-stone/marvel-stone-thumb2.png" alt=""></div>
            </div>
            <div class="item">
                <div class="thumb"><img src="images/homogeneous/marvel-stone/marvel-stone-thumb3.png" alt=""></div>
            </div>
            <div class="item">
                <div class="thumb"><img src="images/homogeneous/marvel-stone/marvel-stone-thumb4.png" alt=""></div>
            </div>
        </div>
        <!-- /carousel-inner -->
        <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
       <span class="glyphicon glyphicon-chevron-left"></span>
    </a>
        <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
       <span class="glyphicon glyphicon-chevron-right"></span>
    </a>
    </div>
    <!-- /myCarousel -->
</div>
<!-- /clearfix -->

脚本我尝试了3个项目。但我不知道如何用简化的脚本来写2个和1个项目。

 $('#myCarousel').carousel({
     interval: false
 });
 var totalItems = $('.item').length;
 if (totalItems > 3) {
     //alert();
     $('.carousel .item').each(function() {
         var next = $(this).next();
         if (!next.length) {
             next = $(this).siblings(':first');
         }
         next.children(':first-child').clone().appendTo($(this));

         if (next.next().length > 0) {

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

         } else {
             $(this).siblings(':first').children(':first-child').clone().appendTo($(this));

         }
     });
 } else {

     //what to be here
 }

my code here

Answer 1

这个适合我。

$('#myCarousel').carousel({ 
              interval: false                 
            });
            var totalItems = $('.item').length;
        if (totalItems > 3) {
            //alert();
            $('.carousel .item').each(function(){
              var next = $(this).next();
              if (!next.length) {
                next = $(this).siblings(':first');
              }
              next.children(':first-child').clone().appendTo($(this));

              if (next.next().length>0) {

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

              }
              else {
                  $(this).siblings(':first').children(':first-child').clone().appendTo($(this));

              }
            }); 
        }
        else {
            //alert("hello");
            (function(){
          $('.carousel .item').each(function(){
            var itemToClone = $(this);

            for (var i=1;i<2;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').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 .item').length;

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

              //if slide number is last then stop carousel
                  if(totalItems == currentIndex){

                    clearInterval(jQuery('.carousel .item').data('bs.carousel').interval);

                  } // end of if

           });

            }

          });
        }()); 
            }

项目小于3时，Carousel thumb slider停止克隆

1 个答案: