我使用 Bootstrap3 as shown in this demo 实现了一个多项目轮播。它一次显示 4 个项目。
我该如何改变呢？我想一次显示 5 或 6 个项目。
【问题讨论】：
标签： html twitter-bootstrap-3 carousel
需要多次更改：
在 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-sm 和col-xs 的col 大小
然后在您的 CSS 中通过将 25% (100%/4) 更改为 16.7% (100%/6) 来适应动画中的 6 个跨度。如果您想要 5 个跨度，您可以将其更改为 20%。
@media (min-width: 992px ) {
.carousel-inner .active.left { left: -16.7%; }
.carousel-inner .next { left: 16.7%; }
.carousel-inner .prev { left: -16.7%; }
}
【讨论】：
foreach 循环来生成您的html，然后根据页面上的元素数量使用jQuery 动态生成您的CSS。这不是一件简单的事情，但如果有必要，它是可以管理的。
只需更改 for 调用的限制
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 来保持列的顺序
【讨论】：