Twitter Bootstrap Carousel显示两项

Question

现在我已实现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;
}

Answer 1

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%

Answer 2

解决方案非常简单。

.item类有两种大小的内容 - 可以说400px。.item-content有200px：

<div class="carousel slide">
  <div class="carousel-inner">
    <div class="item active">
      <div class="item-content">ITEM 1</div>
    </div>
    <div class="item">
      <div class="item-content">ITEM 2</div>
    </div>
    <div class="item">
      <div class="item-content">ITEM 3</div>
    </div>
    <div class="item">
      <div class="item-content">ITEM 4</div>
    </div>
  </div>
</div>

和CSS：

.carousel .item {
  width: 400px;
}
.carousel .item .item-content {
  width: 200px;
}

现在我们必须将下一个项目复制到当前项目中以显示两个项目，例如[1][2] [2][3] [3][4] [4][1]

$('.carousel .item').each(function(){
  var next = $(this).next();
  if (!next.length) {
    next = $(this).siblings(':first');
  }
  next.find('.item-content:first-child').clone().appendTo($(this));
});

并修改轮播过渡：

.carousel-inner .active.left { left: -50%; }
.carousel-inner .next        { left:  50%; }

就这样。