Twitter Bootstrap Carousel 显示两个项目答案

【问题标题】：Twitter Bootstrap Carousel display two itemsTwitter Bootstrap Carousel 显示两个项目
【发布时间】：2013-09-04 12:00:22
【问题描述】：

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

【问题讨论】：

您在寻找这样的东西吗？ bootply.com/78889
完全没有，因为有可见的[1][2]，然后是[3][4]。我需要显示[1][2]，[2][3]...

标签： twitter-bootstrap

【解决方案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%

【讨论】：

你会如何改变它的过渡速度？

【解决方案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%; }

就是这样。

【讨论】：

【解决方案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

【讨论】：

【解决方案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));   
}

【讨论】：