修改bootstrap轮播以同时显示多个幻灯片

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

我在这里找到了一个我想要的例子： http ： //www.bootply.com/117282唯一的问题是我需要5个或6个幻灯片，而不是4个。我花了几个小时尝试修改它以按需工作，但我显然没有充分了解它是如何工作的。

我的jquery / javascript理解非常简单，但我的CSS非常不错。 有人可以告诉我如何修改它以同时显示5/6幻灯片吗？ 我非常感谢你的帮助。

谢谢你，夏尔马

Answer 1

如果你只想覆盖这个小提琴，那么：

1 ：在JS中：改为for (var i=0;i<2;i++) { by for (var i=0;i<4;i++) {

2 ：在HTML中：通过col-lg-2更改col-lg-3 （所以4项）（所以6项）

bootply ： http ： //www.bootply.com/123662

Answer 2

  .carousel-showsixmoveone .carousel-control { width: 4%; background-image: none; } .carousel-showsixmoveone .carousel-control.left { margin-left: 15px; } .carousel-showsixmoveone .carousel-control.right { margin-right: 15px; } .carousel-showsixmoveone .cloneditem-1, .carousel-showsixmoveone .cloneditem-2, .carousel-showsixmoveone .cloneditem-3, .carousel-showsixmoveone .cloneditem-4, .carousel-showsixmoveone .cloneditem-5 { display: none; } @media all and (min-width: 768px) { .carousel-showsixmoveone .carousel-inner > .active.left, .carousel-showsixmoveone .carousel-inner > .prev { left: -33.333%; } .carousel-showsixmoveone .carousel-inner > .active.right, .carousel-showsixmoveone .carousel-inner > .next { left: 33.333%; } .carousel-showsixmoveone .carousel-inner > .left, .carousel-showsixmoveone .carousel-inner > .prev.right, .carousel-showsixmoveone .carousel-inner > .active { left: 0; } .carousel-showsixmoveone .carousel-inner .cloneditem-1, .carousel-showsixmoveone .carousel-inner .cloneditem-2 { display: block; } } @media all and (min-width: 768px) and (transform-3d), all and (min-width: 768px) and (-webkit-transform-3d) { .carousel-showsixmoveone .carousel-inner > .item.active.right, .carousel-showsixmoveone .carousel-inner > .item.next { -webkit-transform: translate3d(33.333%, 0, 0); transform: translate3d(33.333%, 0, 0); left: 0; } .carousel-showsixmoveone .carousel-inner > .item.active.left, .carousel-showsixmoveone .carousel-inner > .item.prev { -webkit-transform: translate3d(-33.333%, 0, 0); transform: translate3d(-33.333%, 0, 0); left: 0; } .carousel-showsixmoveone .carousel-inner > .item.left, .carousel-showsixmoveone .carousel-inner > .item.prev.right, .carousel-showsixmoveone .carousel-inner > .item.active { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); left: 0; } } @media all and (min-width: 992px) { .carousel-showsixmoveone .carousel-inner > .active.left, .carousel-showsixmoveone .carousel-inner > .prev { left: -16.666%; } .carousel-showsixmoveone .carousel-inner > .active.right, .carousel-showsixmoveone .carousel-inner > .next { left: 16.666%; } .carousel-showsixmoveone .carousel-inner > .left, .carousel-showsixmoveone .carousel-inner > .prev.right, .carousel-showsixmoveone .carousel-inner > .active { left: 0; } .carousel-showsixmoveone .carousel-inner .cloneditem-3, .carousel-showsixmoveone .carousel-inner .cloneditem-4, .carousel-showsixmoveone .carousel-inner .cloneditem-5 { display: block; } } @media all and (min-width: 992px) and (transform-3d), all and (min-width: 992px) and (-webkit-transform-3d) { .carousel-showsixmoveone .carousel-inner > .item.active.right, .carousel-showsixmoveone .carousel-inner > .item.next { -webkit-transform: translate3d(16.666%, 0, 0); transform: translate3d(16.666%, 0, 0); left: 0; } .carousel-showsixmoveone .carousel-inner > .item.active.left, .carousel-showsixmoveone .carousel-inner > .item.prev { -webkit-transform: translate3d(-16.666%, 0, 0); transform: translate3d(-16.666%, 0, 0); left: 0; } .carousel-showsixmoveone .carousel-inner > .item.left, .carousel-showsixmoveone .carousel-inner > .item.prev.right, .carousel-showsixmoveone .carousel-inner > .item.active { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); left: 0; } }