修改引导轮播以同时显示多张幻灯片

Posted 2023-03-06

【中文标题】修改引导轮播以同时显示多张幻灯片

【英文标题】：Modify bootstrap carousel to display multiple slides simultaneously

【发布时间】：2014-04-28 19:56:21

【问题描述】：

我想修改 bootstrap 3 的轮播以一次显示多张幻灯片。我知道我可以将多个缩略图放在一张幻灯片（div .item）中，但问题是轮播会同时滑过它们并移至下一组，而 我想逐步浏览它们一个接一个。

我在这里找到了一个我想要的示例：http://www.bootply.com/117282 唯一的问题是我需要 5 或 6 张与 4 相对的幻灯片可见。我花了几个小时试图修改它以使其工作根据需要，但我显然对它的工作原理没有足够的了解。

我对 jquery/javascript 的理解非常初级，但我的 CSS 相当不错。有人可以告诉我如何修改它以同时显示 5/6 张幻灯片吗？我真的很感激帮助。

谢谢， 夏尔马

【问题讨论】：

您应该展示您尝试过的示例，以便人们可以更好地帮助您解决您需要更改的内容。

【参考方案1】：

引导程序 5

这是 2022 年的更新。自 3 甚至 4 以来，Bootstrap 发生了很大变化。下面的代码很容易自定义和适应您的需求，而不会中断与您可能拥有的任何自定义 css 冲突的输入。

Codepen here 和新的 BS5 文档 here

先决条件

<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
    
)

【参考方案2】：

如果你只是想覆盖这个小提琴：

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 循环设置为 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%; 以正确的量移动滑块

@user3446373 你可以感谢小提琴的作者，而不是我......但是如果你的问题解决了，你能接受关闭帖子的答案吗？ （答案左侧，箭头底部）

这太棒了。我怎样才能让左箭头也移动一个？

如果有人在寻找答案，如何一次向左移动 1，答案如下： .carousel-inner .active.right left: 16.6% ; .carousel-inner .prev 左：-16.6% ;

@YenneInfo 可以为 Bootstrap 3.3.5 更新吗？它似乎在这里不起作用：bootply.com/yNdE51hs8o