5

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

4 回答 4

8

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%

于 2014-12-16T23:43:02.713 回答
1

解决方法很简单。

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

就这样。

于 2013-09-04T13:31:02.913 回答
1

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

#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

于 2015-05-27T16:48:34.360 回答
0

上面的答案效果很好，但是当轮播项目数量为奇数时它会中断。我添加了一些 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));   
}
于 2016-02-15T18:25:57.960 回答