我想修改 bootstrap 3 的轮播以一次显示多张幻灯片。我知道我可以将多个缩略图放在一张幻灯片（div .item）中，但问题是轮播会同时滑过它们并移至下一组，而 我想逐步浏览它们一个接一个。
我在这里找到了一个我想要的示例：http://www.bootply.com/117282 唯一的问题是我需要 5 或 6 张与 4 相对的幻灯片可见。我花了几个小时试图修改它以使其工作根据需要，但我显然对它的工作原理没有足够的了解。
我对 jquery/javascript 的理解非常初级，但我的 CSS 相当不错。有人可以告诉我如何修改它以同时显示 5/6 张幻灯片吗？我真的很感激帮助。
谢谢， 夏尔马
【问题讨论】：
标签： jquery css twitter-bootstrap twitter-bootstrap-3 carousel
这是 2022 年的更新。自 3 甚至 4 以来，Bootstrap 发生了很大变化。下面的代码很容易自定义和适应您的需求，而不会中断与您可能拥有的任何自定义 css 冲突的输入。
先决条件
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css">
JS
let items = document.querySelectorAll('.carousel .carousel-item')
items.forEach((el) => {
const minPerSlide = 4
let next = el.nextElementSibling
for (var i=1; i<minPerSlide; i++) {
if (!next) {
// wrap carousel by using first child
next = items[0]
}
let cloneChild = next.cloneNode(true)
el.appendChild(cloneChild.children[0])
next = next.nextElementSibling
}
})
【讨论】：
如果你只是想覆盖这个小提琴：
1：
在 JS 中：将 for (var i=0;i<2;i++) { 更改为 for (var i=0;i<4;i++) {
2：
在 HTML 中：将 col-lg-3（所以 4 项）更改为 col-lg-2（所以 6 项）
bootply：http://www.bootply.com/123662
【讨论】：
for (var i=0;i<3;i++) { 并将 span-lg-2 设置为 20% 的宽度，这似乎有效地给了我五列。 bootply.com/123662 对于任何想要实现的人，您还需要更改 css 以使用 .carousel-inner .active.left { left: -20%; } 和 .carousel-inner .next { left: 20%; } 以正确的量移动滑块