显示多张幻灯片，使用Bootstrap 3.3.5传送带移动一张

问题描述：

我尝试使用此代码段来使Bootstrap的轮播展示6个项目，但仅推进1个和它适用于Bootstrap 3.0.2，但是当我尝试将其与Bootstrap 3.3.5一起使用时，它会推进完整的6.3.3.5的Bootply示例为

I tried using this code snippet to get Bootstrap's carousel to show 6 items, but only advance 1 and it works with Bootstrap 3.0.2, but when I try to use it with Bootstrap 3.3.5, it advances the full 6. The Bootply example with 3.3.5 is here.

我对JS的了解还不够高，我不知道该怎么做.还是有可能吗?

I'm not advanced enough in JS to know what I should be doing differently. Is this still possible?

答

找出最新版本的Bootstrap添加了一些额外的类来移动幻灯片.添加此CSS以覆盖Bootstrap可以解决以下问题:

Figured out that the latest version of Bootstrap adds some extra classes for moving the slides. Adding this CSS to override Bootstrap's fixed the issue:

.carousel-inner > .item.next,
.carousel-inner > .item.active.right {
  left: 0;
  -webkit-transform: translate3d(16.66666667%, 0, 0);
          transform: translate3d(16.66666667%, 0, 0);
}

.carousel-inner > .item.prev,
.carousel-inner > .item.active.left {
  left: 0;
  -webkit-transform: translate3d(-16.66666667%, 0, 0);
          transform: translate3d(-16.66666667%, 0, 0);
}

固定的Bootply 此处

Fixed Bootply here

显示多张幻灯片，使用Bootstrap 3.3.5传送带移动一张

相关推荐