web-dev-qa-db-ja.com

Twitter Bootstrap読み込み時のカルーセル自動再生

Twitter bootstrapフレームワークを使用して、どのようにカルーセルを「自動スライド」に呼び出すことができます。ページがロードされると、カルーセルは自動的にスクロールします。

私は<a>次のリンクの、しかしこれは機能しませんでした。

javascripttwitter-bootstrapcarousel
19
user2132041

Twitter Bootstrap Documentation がカルーセルについて述べているように、最初のカルーセルスライド項目をclass = "active"で設定する必要があります。 この方法でカルーセルのjsを初期化します。

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

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

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

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

47
itsme

シンプル。 divに「data-ride」属性がありません。

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

24
Dan

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

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

これにより、デフォルト設定になります。

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

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

それをドキュメント準備ブロックに入れて、私のために自動起動させます

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

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

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

3
Grateful developer

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

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

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

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

追加する必要があります

data-ride="carousel"

<header id="myCarousel" class="carousel slide" data-ride="carousel">
1
Николай Шеломенцев

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

このような：

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