ブートストラップカルーセルは、モバイルデバイス上で単一のアイテムを表示します。

Question

私は、水平スクロール可能な項目を表示するカルーセルを作成するためにbootsrtapカルーセルを使用しています。

これは、デスクトップ

に見て、これはそれがこれはhtmlコード

<div class="carousel slide" data-ride="carousel" data-type="multi" data-interval="2000" id="featuredCarousel"> 
    <div class="carousel-inner"> 
     <div class="item active"> 
      <div class="col-md-4"> 
       <!-- div content --> 
      </div> 
     </div> 
     <div class="item"> 
      <div class="col-md-4"> 
       <!-- div content --> 
      </div> 
     </div> 
     <div class="item"> 
      <div class="col-md-4"> 
       <!-- div content --> 
      </div> 
     </div> 
     <div class="item"> 
      <div class="col-md-4"> 
       <!-- div content --> 
      </div> 
     </div> 
    </div> 
    <a class="left carousel-control text-info" href="#featuredCarousel" data-slide="prev"><i class="text-info glyphicon glyphicon-chevron-left"></i></a> 
    <a class="right carousel-control text-info" href="#featuredCarousel" data-slide="next"><i class="text-info glyphicon glyphicon-chevron-right"></i></a> 
</div> 

あるモバイルデバイス

に示した方法です方法ですこれはjavascripです各部門のTコード

<script> 
$(function() { 

    $('#featuredCarousel').carousel({ 
     interval: 10000 
    }) 
    console.log($('.item')) 
    $('.item').each(function() { 

     var next = $(this).next(); 
     console.log(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 { 
      $(this).siblings(':first').children(':first-child').clone().appendTo($(this)); 
     } 
    }); 
}); 
</script> 

数は、デスクトップビューに良いですが、私はスライドに、モバイル、残りの上に一つだけのアイテムを表示したいです。

Answer 1

代わりにFlickityを使用することをお勧めします。カルーセル項目をBootstrap列に編成する場合（たとえば、各項目を「col-md-4」に入れる）、FlickityはブートストラップCSSを尊重し、画面解像度ごとにスクロールするアイテムの数を認識します。