带有多个项目的Bootstrap 3轮播

Question

我使用 Bootstrap3 作为shown in this demo 实施了多项旋转木马。它一次显示4个项目。

我该如何改变？我想一次展示5件或6件。

Answer 1

需要进行多项更改：

在JS中将i<2更改为i<3（将显示5个）或i<4（将显示6个）

在HTML中，将<div class="col-md-6 col-md-offset-3">更改为可容纳更多单元格的内容，例如<div class="col-md-10 col-md-offset-1">。 （这是可选的，但在我看来，col-md-6中的6个看起来非常紧张）

将col-md-3更改为col-md-2。请注意，这将仅在中型和大型分辨率屏幕上更改轮播。要调整sm和xs的宽度，您需要调整col和col-sm的{​​{1}}尺寸

然后在你的CSS中通过将25％（col-xs）更改为16.7％（100%/4）来改变动画中的6对应。如果你想要5对，你可以将其改为20％。

100%/6

Updated Bootply with 6 across

Answer 2

只需更改for call的限制

即可

for (var i=0;i<4;i++) {
    next=next.next();
    if (!next.length) {
        next = $(this).siblings(':first');
    }

    next.children(':first-child').clone().appendTo($(this));
 }

现在有六个。

当然，您希望通过将col-md-3更改为col-md-2

来保持列顺序排列