小於3的項目會重復執行Bootstrap輪播縮略圖

Question

我正在使用引導輪播縮略圖。 當前，在完成最后一個滑塊之后，該滑塊會克隆。 當滑塊的數量少於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個項目。 如何使用簡化的腳本制作一個和兩個項目。

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

[我的代碼鏈接]

Answer 1

您可能缺少一些CSS，請嘗試使用以下代碼進行實驗： https : //www.bootply.com/124854#