如何在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

从boostrap的规格来看，似乎没有手动修改的选项，您必须尝试以某种方式覆盖它，这可能很丑陋且需要大量工作。

我建议仅使用一个库，其中该参数只能通过一个变量进行调整。 我以前使用过圆滑的轮播 ，而且非常易于使用。 如果您查看示例“多个项目”，则看起来与您想要的完全一样。

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