web-dev-qa-db-ja.com

ページが読み込まれるとすぐにBootstrap jsカルーセルを自動的に循環させるにはどうすればよいですか？

Bootstrap.jsバージョン2.02の使用

Twitter Bootstrapカルーセルを取得しようとしています。誰かが私のサイトにアクセスするとすぐに自動的に循環します。

カルーセルにすぐにサイクリングを開始してほしい。

誰もこれを行う方法を知っていますか？

私のサイトはhotairraccoon.comです

カルーセルを1回クリックした後、5秒程度ごとに循環が始まる様子がわかりますが、カルーセルのコンテンツを表示するためにクリックが必要になるのは望ましくありません。

ありがとう！

javascripttwitter-bootstrapcarousel
26
Jonathan Larkin

注：コメントで述べたように、このソリューションはBootstrap 2.に対して正常に機能します。Bootstrap 3 。

私はあなたと同じ問題があり、それを修正するためにやらなければならなかったのは、カルーセルを初期化した後にcarousel（ 'cycle'）メソッドを呼び出すことだけでした：

<script type="text/javascript">
$(document).ready(function () {
    $('.carousel').carousel({
        interval: 3000
    });

    $('.carousel').carousel('cycle');
});
</script>

私はこの質問が古いことを理解していますが、私は今夜自分でそれを理解しようとしてグーグルで行っており、誰も適切に答えていないのを見ました。トップ投票の回答は自動的にカルーセルを開始するのではなく、ボタンが押されたときにのみ循環しますが、これはOPが探していたものではありません。

44
Jesse Carter

Bootstrap 3.0では、カルーセルコンテナに 'data-ride'属性を追加することでこれを実現できます。

<div id="my-carousel" class="carousel slide" data-ride="carousel">
    <div class="carousel-inner">
        ...
    </div>
</div>

https://github.com/twbs/bootstrap/blob/v3.0.0/js/carousel.js#L21

42
Matt Zuba
$('.carousel').carousel({
  interval: 2000
})
9
Straseus

Jquery.jsファイルは、headsタグまたはファイルの最後に配置されるかどうかに関係なく、bootstrap.jsの前にロードする必要があります。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.js"type="text/javascript"></script>
4
Stephen Whitehead

これらの解決策のどれもあなたのために働かないなら。これを試して：

$(document).ready(function () {
  function playcarousel(){
    $('.carousel-control.right').trigger('click');
  } 
  window.setInterval(playcarousel, 4000); 
});
3
lvicedo

Bootstrap 3.0では、カルーセルコンテナに 'data-ride'属性を追加することでこれを実現できます。

3
Mazen Shaheed

bootstrapカルーセルを自動的に循環させるもう1つの方法があります。

つかいます - data-ride="carousel"属性。 bootstrap=ページがロードされるとすぐにカルーセルのアニメーションを開始するように指示します。

2
Rohit Waghela

次のようにカルーセルを初期化してみてください。

$('.carousel').carousel().next();
2
dfsq

これを整理したかどうかはわかりませんが、私もその問題を抱えていました。カルーセル間隔の設定を次のような関数でラップすることで解決しました。

!function ($) {
$(function() {
    $('.carousel').carousel({ interval: 3000 })
});
}(window.jQuery);
1
Shaun Scovil

迅速で汚い解決策は、ドキュメントのボタンをプログラムでクリックすることです。

$(function() {
  $(".right.carousel-control").click();
});

ところで：他のスクリプトが$を参照する前にjQueryを必ずロードしてください。今は2つのUncaught ReferenceError: $ is not defined行101および182で$を呼び出しますが、jqueryは最初に行243でロードされるためです。

これらのエラーをキャッチするには、firebugや開発者ツール（chrome/safari）などのツールを使用することをお勧めします。

編集：あなたはすでに実用的なソリューションを持っていると思いますが、ロードする前にjqueryを使用するため、動作しません。

1
ebaxt
    <div id="myCarousel" class="carousel slide">
            <!-- Indicators -->
            <ol class="carousel-indicators">
              <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
              <li data-target="#myCarousel" data-slide-to="1"></li>
            </ol>
            <!-- Wrapper for slides -->
            <div class="carousel-inner">
              <div class="item active">
               <img src="img1" class="img-responsive" alt="stuff1" > 
              </div>
              <div class="item">
               <img src="img2" class="img-responsive" alt="stuff2" > 
              </div>
            </div>
           <!-- Controls-->
      <a class="left carousel-control" href="#myCarousel" data-slide="prev">
        <span class="icon-prev"></span>
      </a>
      <a class="right carousel-control" href="#myCarousel" data-slide="next">
        <span class="icon-next"></span>
      </a> 
          </div>

 <!--This script should be at the very bottom of the page (footer works for me)-->  
    <script>
    $('#myCarousel').carousel
    ({
        interval: 2000,


        })

    </script>
0
Zeeba

ここには間違いなく正しい答えがありますが、コードにエラーを追加することで、ポスターが説明するとおりに正確な動作を再現できることを付け加えました。たとえば、セミコロンまたは終了スクリプトタグを削除すると、カルーセルは自動再生しなくなります。

したがって、最初にすべきことは、javascriptコンソールでエラーを探すことです！

0
ippi

これを試して。

$(document).ready(function ()
{
    $('.carousel').carousel({interval:5000,pause:false});
});
0
Laércio_Kelson

これは、この質問に対するJesse Carterの回答に基づいて、私にとっては有効な解決策です。なぜこれが機能するのかわかりませんが、何らかの理由で2つの呼び出しが必要です。1つはドキュメント内にあり、もう1つは外部にあります。それらのいずれかを削除すると、一時停止機能が正常に動作しない、または自動サイクリングなど、何かがうまくいきません。さらに、間隔はdoc.ready内でのみ機能するようです。 javascriptの頭からのコメントは大歓迎です;-)しかし、私はT.B.のこの領域を疑います。完全にバグがないわけではありません！私は少し遅れていることがわかっている2.0.2を使用しています（現在のバージョンは 2.0.4 です）が、この領域に変更はありません

jQuery(document).ready(function () {
    jQuery('#myCarousel').carousel(
    {
    interval:2000
    });
});

jQuery('#myCarousel').carousel();
0
byronyasgur

これを修正する正しい方法は、カルーセルの作成中にカルーセルの最初のイメージに「アクティブな」クラスを追加することです。これにより、カルーセルはできるだけ早くサイクリングを開始します。

以下に例を示します。

    <div class="carousel slide">
      <div class="carousel-inner">
        <div class="item active"></div>
        <div class="item"></div>
        <div class="item"></div>
      </div>
    </div>
0
Vishal Sood