twitter-bootstrap - Twitter Bootstrap Carousel显示两个项目

现在，我已经实现了Twitter Bootstrap 3 Carousel，它显示一个项目，并且在过渡期间显示下一个元素，因此看起来像:

 [1]    /transition/   [2]    /transition/   [3]   ...

我必须显示两个项目，过渡后显示第二个元素和第三个元素:

[1][2]  /transition/  [2][3]  /transition/  [3][4] ...

甚至有可能实现吗？

我尝试将active类应用于页面加载时的两个元素，但是Carousel不再起作用。另外，使用以下CSS也不起作用:

.item.active + .item {
  display: block !important;
}

最佳答案

Hsz的解决方案运行良好，直到Twitter Bootstrap 3.3才添加了对3D变换的支持，这将覆盖您的样式进行过渡(左:50％，左:-50％)

因此，您必须使用以下CSS覆盖Twitter Bootstrap的默认过渡样式:

@media all and (transform-3d), (-webkit-transform-3d) {
  .carousel-inner > .item.next,
  .carousel-inner > .item.active.right {
      left: 0;
      -webkit-transform: translate3d(50%, 0, 0);
      transform: translate3d(50%, 0, 0);
  }
  .carousel-inner > .item.prev,
  .carousel-inner > .item.active.left {
      left: 0;
      -webkit-transform: translate3d(-50%, 0, 0);
      transform: translate3d(-50%, 0, 0);
  }
}

如果您显示3个项目，则可能需要将50％更改为33％