javascript - ロード時のTwitterブートストラップカルーセルの自動再生

Question

Twitterブートストラップフレームワークを使用して、カルーセルを呼び出して「自動スライド」する方法を教えてください。つまり、ページが読み込まれると、カルーセルは自動的にスクロールします。

次のリンクのjavascriptonLoadクリック関数を試しました<a>が、これは機能しませんでした。

score 49 · Accepted Answer

Twitter Bootstrap Documentationがカルーセルについて述べているように行う必要があるため、最初のカルーセルスライドアイテムにclass = "active"を設定し、次のようにカルーセルのjsを初期化します。

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

次に、それだけでは不十分な場合（ただし、これは私には起こりませんでした）、ブルートフォースを使用して、次のようにカルーセルコントロールボタンをクリックホバーします。

$(function(){
$('.carousel').carousel({
      interval: 2000
    });
$('.carousel-control.right').trigger('click');
});

しかし、これは必要のないトリックです。実際には、ドキュメンテーションに従ってください。

score 24 · Accepted Answer

単純。divに「data-ride」属性がありません。

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

score 8 · Accepted Answer

ドキュメントに従って、 JavaScriptを介してカルーセルプラグインを初期化する必要があります。公式のBootstrapドキュメントページのカルーセルの例は、67〜68行目のapplication.jsファイルで初期化されています。

// carousel demo
$('#myCarousel').carousel()

これにより、デフォルト設定が提供されます。

intervalサイクル間隔を指定する場合は、プロパティをミリ秒単位で設定できます。

$('.carousel').carousel({
  interval: 2000
})

score 6 · Accepted Answer

それをdocument-ready-blockに入れて、自動起動させてください

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

score 3 · Accepted Answer

<div id="myCarousel" class="carousel slide" data-ride="carousel">私のために働いています、私が欠けていたのはデータライド属性でした。

これが多くの人の役に立つことを願っています。stackoverflowに感謝します、あなたはほとんどの理由で私にとって非常に役に立ちました。このコミュニティが存在することをうれしく思います。

score 1 · Accepted Answer

htmlマークアップのdata-interval属性を使用して、自動再生できます。

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

data-interval：アイテムを自動的に循環させるまでの遅延時間（ミリ秒単位）。falseの場合、カルーセルは自動的に循環しません。

score 1 · Accepted Answer

<header id="myCarousel" class="carousel slide">

追加する必要があります

data-ride="carousel"

<header id="myCarousel" class="carousel slide" data-ride="carousel">

score 1 · Accepted Answer

IPでに追加data-interval="5000"するだけです。divcarouselExampleIndicators

このような：

<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel" data-interval="5000">

score 1 · Accepted Answer

Bootstrap 4以降の場合：

$(function(){
    $('.carousel').carousel({
      interval: 2000,
      ride: 'carousel' // this is the important part
    });
});

score -3 · Accepted Answer

次のように、クラス「slide」をカルーセルdivタグに追加するだけです。

<div class="carousel slide" id="this-carousel-id">

10 に答える 10