Bootstrap Multiple Items Carousel（一次显示多个轮播项目）

Question

如何在 Bootstrap 4 中实现多项目轮播？文档提到了多个轮播，但没有提到包含多个项目的轮播。

原文由 SemanticUI 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以一次显示一个轮播项目，但可以用多个元素填充它。就像是：

 .item
  .col-xs-4
     {content}
  .col-xs-4
     {content}
  .col-xs-4
     {content}

但是你可能会希望一次可以推进一个。开箱即用的引导程序不会发生这种情况。在实施了许多轮播之后，我建议在 Bootstrap 不适合时寻找另一个轮播库。 Slick.js 是我的许多轮播配置选项的首选库。它是一个相当纤细的 ~5k min’d 和 gzipped。

如果您对使用 bootstrap 很执着，这里有一个脚本可以提供单项、多项： http ://codepen.io/MarkitDigital/pen/ZpEByz

原文由 Eric N 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

Bootstrap 5 - 2021 年更新

与早期版本一样，最好的方法是将多张幻灯片放在单张 carousel-item 中。这可以使用网格类来完成…

 <div class="carousel-item">
   <div class="row">
     <div class="col">slide 1</div>
     <div class="col">slide 2</div>
     <div class="col">slide 3</div>
     <div class="col">slide 4</div>
   </div>
</div>
<div class="carousel-item">
   <div class="row">
     <div class="col">slide 5</div>
     <div class="col">slide 6</div>
     <div class="col">slide 7</div>
     <div class="col">slide 8</div>
   </div>
</div>

上面的代码将一次推进 4 张幻灯片。如果您希望轮播 一次推进一张幻灯片， 请参阅此问题。

Bootstrap 4 - 2019 年更新

我使用 Bootstrap 4 网格完成了此操作，每个轮播项目都有单独的列。如果你想一次只推进一个项目，脚本可以是这样的，将幻灯片克隆到每个轮播项目中。

 (function($) {
    "use strict";

    $('.carousel .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));
      }
    });

})(jQuery);

多项：

http://codeply.com/go/WEbiqQvGhy

多个项目，一次移动一个：

http://codeply.com/go/FrzoIEKCdH（Bootstrap 4 alpha）

http://codeply.com/go/3EQkUOhhZz （ 引导程序 4.0.0 ）

响应式大 3 件（一次 1 件），小件 1 件：

http://codeply.com/go/s3I9ivCBYH

---

另请参阅：https://stackoverflow.com/a/20008623/171456

原文由 Zim 发布，翻译遵循 CC BY-SA 4.0 许可协议