小于3的项目会重复执行Bootstrap轮播缩略图

Question

I am using bootstrap carousel thumbnail. Currently the slider clone after complete the last slider . I need to stop repeating item when my slider count less than 3. I have tried the below script. Anyone help me to achieve this .

<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 --> 

below script I wast tried for 3 items. How to make it for one and two items with simplified script.

 $('#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 link]

Answer 1

您可能缺少一些CSS，请尝试使用以下代码进行实验： https : //www.bootply.com/124854#