2016-11-15 17 views
0

現在のカルーセル(v3.3.7)には3つの項目があり、そのうち2つはデフォルトで表示されます。 「次へ」をクリックすると2番目と3番目を表示し、次に3番目と1番目をクリックして次のように表示します。次の行のブートストラップカルーセルコントロールの表示項目

現在の擬似HTMLがそうのようになります。

.row 
    .col-xs-6 
     .title 
     .text 
    .col-xs-6 
     .title 
     .text 
.row 
    .col-xs-6 
     .title 
     .text 
.navigation-controls 

デフォルトでは、あなたが想像として、私は以下を参照してください1 | 2と次のクリックで、私は数多くのバリエーションを試してみた3 | (blank)

を見ますinfinite loop javascript snippet hack several are talking aboutのすべてですが、これは私にとっては要素内の次のスライドを、.text.titleの横に追加することです。私の.col-xs-6要素のそれぞれには、私の神経になっている.navigation-controlsが含まれています。

結論私の.rowを完全に(私のDOMの一部を複製して)埋め込むのに十分なまで、ループしないでループを作成する必要があります。

+0

あなたが試したコード、または動作中のfiddle/bootplyを投稿できますか? – ZimSystem

答えて

0

これを実現する最も簡単な方法は、プラグインを導入することです。 私は非常に滑らかなスライダーをお勧めします。それのためhttp://kenwheeler.github.io/slick/

設定は次のようになります。

$('.carouselWrapper').slick({ 
    dots: true, 
    infinite: true, 
    speed: 300, 
    slidesToShow: 2, 
    adaptiveHeight: true 

});

+0

ありがとう、私はあなたが提案したように滑らかに進むだろう。 – davewoodhall

関連する問題