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%; }

就是这样。

Answer 3

我知道它有点陈旧，但我设法解决了，

#carousel-galleries{
  .carousel-inner{
    .item{
      @media all and (transform-3d), (-webkit-transform-3d) {
        @include transition-transform(0.6s ease-in-out);
        @include backface-visibility(hidden);
        @include perspective(1000);

        &.next,
        &.active.right {
          @include translate3d(25%, 0, 0);
          left: 0;
        }
        &.prev,
        &.active.left {
          @include translate3d(-25%, 0, 0);
          left: 0;
        }
        &.next.left,
        &.prev.right,
        &.active {
          @include translate3d(0, 0, 0);
          left: 0;
        }
      }
    }
  }
}

这是4项提前1，bootstrap-sass 3.3.1带指南针

Answer 4

上面的答案效果很好，但是当有一个奇数的轮播项目时就会中断。我添加了一些jquery，使其适用于奇数和偶数

if ($(this).siblings(':last')) {
    $(this).siblings(':first').find('.item-content:first-child').clone().appendTo($(this));
}
else
{
    next.find('.item-content:first-child').clone().appendTo($(this));   
}

Twitter Bootstrap Carousel显示两项

4 个答案: