2017-01-09 4 views
0

私はグループとして3つの画像を含むカルーセルを作った。例えばBootstrap Carouselで一度に3枚の画像を進めるには?

:あなたは、右矢印を打ったとき < [1] [2] [3]>

は現在、それは一度に一つの画像を行きます。 < [2] [3] [4]>

私は次の3枚の画像に進む/表示する方法を、矢印をクリックしたときに知っていただきたいと思います。このよう

: は< [4] [5] [6]>ここで

は、いくつかのコードです:

<div class="carousel slide" id="myCarousel" data-interval="false"> 
    <div class="carousel-inner"> 
    <div class="item active"> 
     <div class="col-md-4">image1</div> 
    </div> 

    <div class="item"> 
     <div class="col-md-4">image2</div> 
    </div> 

     <div class="item"> 
     <div class="col-md-4">image3</div> 
    </div> 

     <div class="item"> 
     <div class="col-md-4">image4</div> 
    </div> 

     <div class="item"> 
     <div class="col-md-4">image5</div> 
    </div> 

     <div class="item"> 
     <div class="col-md-4">image6</div> 
    </div> 

    </div></div> 

    <script> 

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

答えて

0

ブートストラップの仕様を見て、変更するオプションがあるようには思えませんこれは手作業です。あなたは何とかそれを上書きしようとするでしょう。おそらく、醜くて、たくさんの作業になるでしょう。

私は、このパラメータが1つの変数で調整可能なライブラリを使用することをお勧めします。以前はslick carouselを使っていましたが、使い方はとても簡単です。 "multiple-items"の例を見ると、探しているもののように見えます。

$('.multiple-items').slick({ 
    infinite: true, 
    slidesToShow: 3, 
    slidesToScroll: 3 
}); 
+0

ありがとうございました。それは非常に便利です! – WoShiNiBaBa

+0

問題はありません。はい、それはかなり素晴らしいです! – alexr101

関連する問題