2013-10-20 15 views
5

自動サイクルのないTwitterのブートストラップカルーセルを初期化する方法はありますか?設定interval: falseは最初はサイクルしませんが、nextまたはprevをクリックすると、再びサイクリングを開始します。私はそれがまったく循環しないようにしたい。Twitter Bootstrap Carousel - サイクルしない

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

をカルーセルに画像を表示するには:ここで

編集

は、私はそれを初期化するために使用しているjQueryのコードです

image_tag('image.png', :'data-target' => '#carousel', :'data-slide-to' => 1) 
+0

あなたのコードのPLZの一部を貼り付けてもらえますか? –

答えて

2
$(document).ready(function() {  
    $('#carousel').carousel('pause'); 
}); 

それでも解決しない場合は、これを試してください:

$('#carousel').carousel({interval: false}); 
$(document).on('mouseleave', '#carousel', function() { 
    $(this).carousel('pause'); 
}); 

mouseleaveイベントで一時停止をリセットします。

+0

これはうまくいかないようです。カルーセルには決してサイクリングのオプションがありませんか? –

8

data-interval="false".carousel divマークアップに追加することで、ブートストラップのカルーセルのサイクリングをページロードで停止することができます。 (私は上記の回答のいずれかの作業を取得することができませんでした。)

+1

data-interval = falseおよびdata-ride = ""を追加すると、サイクリングが停止します。 –

4

私はあなたが「データ・ラップ」を探していると思いますが、カルーセル、イベントを中止し、スライドを制御することができます

<div id="crsl1" class="carousel slide" data-ride="carousel" data-wrap="false"> 
    ... 
</div> 
+0

最初にスクロールするのを止めますが、左または右の矢印をクリックするとスクロールが再開されます – scottndecker

+0

上記のコメントに編集:falseです。 data-wrap = "false"は、カルーセルが無限のパターン(自動的にjsを通過するか、ユーザがクリックするかにかかわらず)を周り回したり、周りを回るのを止めます。 OPは、自動スクロール(無限であろうとなかろうと)を防ぐことを求めている。そのために、data-interval = "false"は魅力のように機能します。 – scottndecker

0

パラメータ手動

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

    $(document).off('.bs.carousel.data-api'); 

    $('#carousel a').on('click', function (ev) { 
     if ($(ev.currentTarget).hasClass('right')) { 
      $('#carousel').carousel('next'); 
     } 

     if ($(ev.currentTarget).hasClass('left')) { 
      $('#carousel').carousel('prev'); 
     } 
    }) 
}); 
0

はこれを試してみてください:

data-ride="carousel" remove from carousel and $('#carousel-example-generic').carousel({interval: false}) 
関連する問題