Как продвигать 3 изображения за один раз в Bootstrap Carousel?

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

Глядя на спецификации boostrap, в не кажется, что будет возможность изменить это вручную. Вы должны попытаться переопределить его каким-то образом, что, вероятно, будет уродливым и много работать.

Я бы предложил просто использовать библиотеку, где этот параметр настраивается только с одной переменной. Раньше я использовал slick carousel, и он очень прост в использовании. Если вы посмотрите на пример «несколько элементов», он будет выглядеть именно так, как вы хотите.

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