web-dev-qa-db-ja.com

Twitter bootstrapカルーセルがページの読み込み時に自動スライドするのを防ぐ

とにかく、次または前のボタンがクリックされない限り、Twitter bootstrapカルーセルがページの読み込み時に自動スライドするのを防ぐ方法はありますか？

ありがとう

jquerytwitter-bootstrapcarousel
114
Tepken Vannkorn

または、Bootstrap 3.0を使用している場合、たとえばdata-interval = "false"でサイクリングを停止できます。

<div id="carousel-example-generic" class="carousel slide" data-interval="false">

他の役立つカルーセルデータ属性はこちら-> http://getbootstrap.com/javascript/#carousel-usage

250
Michal Kopec

実際、問題は解決されました。次のように、メソッド 'carousel'に 'pause'引数を追加しました。

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

とにかく、この解決策へのヒントをありがとう@Yohn。

53
Tepken Vannkorn

前/次ボタンを押した後のカルーセルの自動スライドの問題は解決されました。

$('.carousel').carousel({
    pause: true,
    interval: false
});

GitHub commit 78b927b

41
Srnux

bootstrapを使用している場合、カルーセルのHTML構造にdata-interval="false"を設定します

例：

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="false">
17
marciocst
  • data-interval="false"を使用して自動スライドを停止します
  • data-wrap="false"を使用して、円形スライドを停止します
10
Anil Ram

これをコースdivに追加します。

data-interval="false"
10
Dylan B

以下は、bootstrapカルーセルのパラメーターのリストです。間隔、一時停止、ラップのように：

enter image description here

詳細については、次のリンクを参照してください。

http://www.w3schools.com/bootstrap/bootstrap_ref_js_carousel.asp

これがあなたを助けることを願っています:)

注：これはさらなるヘルプです。カルーセルが読み込まれたら、デフォルトの動作をカスタマイズまたは変更する方法を意味します。

5
Vikash Pandey

私は、カルーセルに関する公式の指示を確認する必要があると思います、私にとっては、上記の答えは見つかりませんでした、ブートストラップの複数のバージョンのため、私はb4-alphaを使用しており、i効果停止。

$(document).ready({
    pause:true,
    interval:false
});

このスクリプトは、マウスがそのページ、正確にはカルーセル領域を離れている間は効果がありません。公式の定義に行き、それらを見つけてください：

enter image description here

そのため、なぜカルーセルページのonmouseoverイベントがトリガーされると、ページが一時停止し、そのページからマウスが出ると再び再開します。

したがって、ページを永久に停止して手動で回転させる場合、単にdata-interval='false'を設定できます。

2
Crabime

Bootstrap 4の場合、カルーセルdivから 'data-ride = "carousel"'を削除するだけです。これにより、ロード時の自動再生が削除されます。

自動再生を再び有効にするには、javascriptで「play」呼び出しを使用する必要があります。

1
James

-data-interval = "false"を使用して自動スライドを停止します-data-wrap = "false"を使用して循環スライドを停止します

1
Anil Kumar Ram