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

2018年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); 

多项目:http:
//codeply.com/go/WEbiqQvGhy

多个项目,一次移动一个:
http://codeply.com/go/FrzoIEKCdH(Bootstrap 4 alpha)
http://codeply.com/go/3EQkUOhhZz(Bootstrap 4.0.0)

响应3项大项(一次1项),1项较小:http:
//codeply.com/go/s3I9ivCBYH

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