如何在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 
});