如何在 Bootstrap 轮播中一次推进 3 张图片？

Question

我制作了一个包含三张图片的轮播。

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

目前，当您点击向右箭头时，一次只能移动一张图片。 <[2][3][4]>

我想知道点击箭头时，如何show/advance到下三张图片。

像这样： <[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 的规范，似乎没有修改此选项的选项 manually.You 必须尝试以某种方式覆盖它，这可能会很丑陋并且需要大量工作。

我建议只使用一个库，其中这个参数只能用一个变量来调整。我以前用过slick carousel，非常好用。如果您查看示例 "multiple-items"，它看起来正是您要查找的内容。

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

如何在 Bootstrap 轮播中一次推进 3 张图片？

How to advance 3 images at one time in Bootstrap Carousel?

html

javascript

jquery

carousel

twitter-bootstrap