5

現在Twitter Bootstrap 3 Carousel、1 つのアイテムを表示し、遷移中に次の要素を表示する実装を実装したので、次のようになります。

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

2 つのアイテムを表示する必要があり、遷移後に 2 番目の要素と 3 番目の要素を表示する必要があります。

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

達成することさえ可能ですか？

activeページの読み込み時に 2 つの要素にクラスを適用しようとしましたが、Carousel機能しなくなりました。また、次の CSS を使用しても機能しません。

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

4 に答える 4

8

Hsz のソリューションは、トランジションのスタイルをオーバーライドする 3D 変換のサポートが追加された Twitter Bootstrap 3.3 まで正常に機能しました (左: 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クラスには 2 つのサイズのコンテンツがあります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;
}

現在、次のアイテムを現在のアイテムに複製して、次のような2つのアイテムを表示する必要があります[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 with compass です。

于 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 に答える