Bootstrap 4多项旋转木马（一次显示几个旋转木马项目）

Question

如何在Bootstrap 4中实现多项旋转木马？文档提到了多个旋转木马，但没有提到带有多个项目的旋转木马。

Answer 1

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

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

但是你可能希望你可以一次推进它们。开箱即用就不会发生这种情况。在实施了许多旋转木马后，我建议在Bootstrap不符合要求的情况下寻找另一个旋转木马库。 Slick.js是我的许多carousel配置选项的首选库。它相当纤薄~5k min'd和gzipped。

如果你在使用bootstrap时很难，这里有一个可以提供单个高级多项的脚本：http://codepen.io/MarkitDigital/pen/ZpEByz

Answer 2

2019年Bootstrap 4更新

我使用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); 

多件物品： qazxsw poi

多件物品，一次移动一件： qazxsw poi（Bootstrap 4 alpha） qazxsw poi（Bootstrap 4.0.0）

响应3件物品（一次1件），1件物品较小： http://codeply.com/go/WEbiqQvGhy

---

Also see: http://codeply.com/go/FrzoIEKCdH

Answer 3

我正在使用bootstrap 4.这段代码适合我

http://codeply.com/go/3EQkUOhhZz

这个六个图像的多旋转木马每次都作为批量滑动。免费问我:)