【问题标题】: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 张幻灯片吗?我真的很感激帮助。

谢谢, 夏尔马

【问题讨论】:

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

标签: jquery css twitter-bootstrap twitter-bootstrap-3 carousel


【解决方案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&lt;2;i++) { 更改为 for (var i=0;i&lt;4;i++) {

    2: 在 HTML 中:将 col-lg-3(所以 4 项)更改为 col-lg-2(所以 6 项)

    bootplyhttp://www.bootply.com/123662

    【讨论】:

    • 哇,太棒了,谢谢。我现在将 for 循环设置为 for (var i=0;i&lt;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
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2022-11-30
    • 2021-01-15
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2013-04-02
    • 1970-01-01
    相关资源
    最近更新 更多