Question

我制作了一个包含三张图片的旋转木马。

例如：＆LT; [1] [2] [3]＆GT;

目前，当您点击右箭头时，它一次只能显示一张图像。＆LT; [2] [3] [4]＆GT;

我想知道点击箭头时，如何显示/前进到下三张图像。

像这样：＆LT; [4] [5] [6]＆GT;

以下是一些代码：

<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
});

如何在Bootstrap Carousel中一次前进3张图像？

1 个答案: