複数のアイテムを持つブートストラップカルーセル

Question

私はJSFiddleで利用可能なプロジェクトに取り組んでいます。ご覧のとおり、6つのアイテムが表示され、1つのスライドに3つのアイテムを表示するカルーセルを作りたいと思います。この問題を研究した後、私はこの素晴らしいプロジェクトをCodepenに見つけました。 私のプロジェクトの各項目は、次のコードで表されます。Codepen上の項目は、この1によって表されている間

<div class="wrapper"> 
 
    <img src="https://photos-2.dropbox.com/t/2/AACS3GcxUnMu4DpsfC5pF-zF55I8WHf1blL4AvkQULu1Gw/12/226666032/jpeg/32x32/1/_/1/2/3.jpg/EO2pmKoBGHsgAigC/iV0gUV38M-Y4EoQJWevkk6_etV3EZi1baTQUzImrReM?size=1024x768&size_mode=3" alt="" /> 
 

 
    <div class="overlay"> 
 
     <h2 class="header">A Movie in the Park: Kung Fu Panda</h2> 
 
    </div> 
 
</div>

：

<div class="item active"> 
 
    <div class="col-xs-4"> 
 
     <a href="#1"><img src="http://placehold.it/300/f44336/000000" class="img-responsive"></a> 
 
    </div> 
 
</div>

Codepeでアイテムのコードを削除しようとするたびにJSFiddleからアイテムのコードを配置すると、スライダの動作が停止します。

この問題を解決する方法を教えてください。

Answer 1

carousel documentationを読んで、各項目の形式に注意してください（具体的には.itemと.activeの追加）。

3つの要素が行ごとに表示されるように、各画像の周りにこのラッパーは、それを作っている。

<div class="col-xs-4"> 
    ... 
</div> 

（比較において、.col-xs-12を使用して表示行毎に1枚の画像を示すであろう、と表示あたり.col-xs-6は、2枚の画像を示すことになります行）

Answer 2

これはあなたが望むものですか？あなたが理解しているだろう、それが働いていなかった理由を聞いてください。あなたはいくつかの図書館とCSSを見逃しているかもしれません。

$('#theCarousel').carousel({ 
 
    interval: false 
 
}) 
 

 
$('.multi-item-carousel .item').each(function(){ 
 
    var next = $(this).next(); 
 
    if (!next.length) { 
 
    next = $(this).siblings(':first'); 
 
    } 
 
    next.children(':first-child').clone().appendTo($(this)); 
 
    
 
    if (next.next().length>0) { 
 
    next.next().children(':first-child').clone().appendTo($(this)); 
 
    } 
 
    else { 
 
    \t $(this).siblings(':first').children(':first-child').clone().appendTo($(this)); 
 
    } 
 
});

.multi-item-carousel{ 
 
    .carousel-inner{ 
 
    > .item{ 
 
     transition: .6s ease-in-out all; 
 
    } 
 
    .active{ 
 
     &.left{ 
 
     left:-33%; 
 
     } 
 
     &.right{ 
 
     left:33%; 
 
     } 
 
    } 
 
    .next{ 
 
     left: 33%; 
 
    } 
 
    .prev{ 
 
     left: -33%; 
 
    } 
 
    } 
 
    .carouse-control{ 
 
    &.left, &.right{ 
 
     background-image: none; 
 
    } 
 
    } 
 

 
    @media all and (transform-3d), (-webkit-transform-3d) { 
 
    &{ 
 
     .carousel-inner { 
 
     > .item{ 
 
      transition: .6s ease-in-out all; 
 
      -webkit-backface-visibility: visible; 
 
      backface-visibility: visible; 
 
      -webkit-perspective: none; 
 
      -webkit-transform: none!important; 
 
      transform: none!important; 
 
     } 
 
     } 
 
    } 
 
    } 
 
}

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> 
 
<div class="container"> 
 
    <div class="col-md-8 col-md-offset-2"> 
 
    <div class="carousel slide multi-item-carousel" id="theCarousel"> 
 
     <div class="carousel-inner"> 
 
     <div class="item active"> 
 
      <div class="col-xs-4 wrapper"> 
 
      <a href="#1"><img src="http://placehold.it/300/f44336/000000" class="img-responsive"></a> 
 
      </div> 
 
     </div> 
 
     <div class="item"> 
 
      <div class="col-xs-4"> 
 
      <a href="#1"><img src="http://placehold.it/300/e91e63/000000" class="img-responsive"></a> 
 
      <div class="overlay"> 
 
       <h5 class="header">A Movie in the Park: Kung Fu Panda</h5> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     <div class="item"> 
 
      <div class="col-xs-4"> 
 
      <a href="#1"><img src="http://placehold.it/300/9c27b0/000000" class="img-responsive"></a> 
 
      <h5 class="header">Batman Return</h5> 
 
      </div> 
 
     </div> 
 
     <div class="item"> 
 
      <div class="col-xs-4"> 
 
      <a href="#1"><img src="http://placehold.it/300/673ab7/000000" class="img-responsive"></a> 
 
      <h5 class="header">Deadpool</h5> 
 
      </div> 
 
     </div> 
 
     <div class="item"> 
 
      <div class="col-xs-4"> 
 
      <a href="#1"><img src="http://placehold.it/300/4caf50/000000" class="img-responsive"></a> 
 
      </div> 
 
     </div> 
 
     <div class="item"> 
 
      <div class="col-xs-4"> 
 
      <a href="#1"><img src="http://placehold.it/300/8bc34a/000000" class="img-responsive"></a> 
 
      </div> 
 
     </div> 
 
     </div> 
 
     <a class="left carousel-control" href="#theCarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a> 
 
     <a class="right carousel-control" href="#theCarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a> 
 
    </div> 
 
    </div> 
 
</div>