【问题标题】:Bootstrap 3 carousel with multiple items带有多个项目的 Bootstrap 3 轮播
【发布时间】:2014-10-10 00:46:43
【问题描述】:

我使用 Bootstrap3 as shown in this demo 实现了一个多项目轮播。它一次显示 4 个项目。

我该如何改变呢?我想一次显示 5 或 6 个项目。

【问题讨论】:

标签: html twitter-bootstrap-3 carousel


【解决方案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。请注意,这只会在中、大分辨率屏幕上更改轮播。要调整smxs 的宽度,您需要调整col-smcol-xscol 大小

然后在您的 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%; }  
}

Updated Bootply with 6 across

【讨论】:

  • 成功了。有没有办法将动态图像添加到轮播中,而不是静态图像。等从数据库中检索到的 10 个图像的数组插入并显示在轮播中。
  • 当然有办法,但这是一个单独的问题/问题。您可以使用foreach 循环来生成您的html,然后根据页面上的元素数量使用jQuery 动态生成您的CSS。这不是一件简单的事情,但如果有必要,它是可以管理的。
  • 我在单个页面中有这个多项目滑块和一个普通(1 项目)滑块。但是由于您上面提到的媒体查询,普通滑块无法正常工作。有什么关于吗??
  • 有点晚了,但只是为了回答最后的评论/问题以供将来参考。只需将唯一 id (id="my-unique-carousel-id") 添加到包含多个项目的轮播中,并在您的媒体查询/CSS 中引用它。所以不是“.carousel-inner .active.left { left: -16.7%; }” 它会说“#my-unique-carousel-id .carousel-inner .active.left { left: -16.7%; }”
【解决方案2】:

只需更改 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 来保持列的顺序

【讨论】:

    猜你喜欢
    • 2022-01-08
    • 1970-01-01
    • 2012-09-13
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2017-03-16
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多