如何在Bootstrap Carousel中一次提前3張圖像？

Question

我做了一個包含三個圖像作爲一個組的旋轉木馬。

例如： < [1] [2] [3]>

目前當你擊中右箭頭，它僅在一個時間的推移的一個圖像。 < [2] [3] [4]>

我想知道點擊箭頭時，如何顯示/前進到下三張圖片。

像這樣： < [4] [5] [6]>

下面是一些代碼：

<div class="carousel slide" id="myCarousel" data-interval="false"> 
    <div class="carousel-inner"> 
    <div class="item active"> 
     <div class="col-md-4">image1</div> 
    </div> 

    <div class="item"> 
     <div class="col-md-4">image2</div> 
    </div> 

     <div class="item"> 
     <div class="col-md-4">image3</div> 
    </div> 

     <div class="item"> 
     <div class="col-md-4">image4</div> 
    </div> 

     <div class="item"> 
     <div class="col-md-4">image5</div> 
    </div> 

     <div class="item"> 
     <div class="col-md-4">image6</div> 
    </div> 

    </div></div> 

    <script> 

    $('.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)); 
     } 
     else { 
     $(this).siblings(':first').children(':first-child').clone().appendTo($(this)); 
     } 
    });  
    </script> 

Answer 1

縱觀自舉的規範，似乎沒有要修改的選項這個手動操作。你必須嘗試以某種方式覆蓋它，這可能會是醜陋的和很多工作。

我會建議只使用一個庫，其中只能使用一個變量調整該參數。我之前使用過slick carousel，使用起來非常簡單。如果你看看「多項目」的例子，它看起來像你正在尋找什麼。

$('.multiple-items').slick({ 
    infinite: true, 
    slidesToShow: 3, 
    slidesToScroll: 3 
});