web-dev-qa-db-ja.com

Twitter Bootstrapカルーセルが自動的に起動しない

私のサイトには、Twitter Bootstrapで作成されたカルーセルがあります。ページがロードされたときに自動的に開始しない理由はわかりませんが、矢印をクリックして次のスライドに進むまで開始されず、タイマーが作動します。bootstrapドキュメントからこのオブジェクトで初期化できると書かれていますが、これはどこに置くのですか？

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

私のサイトには、jquery-1.7.2.min.jsとbootstrap.min.jsの2つのjavascriptファイルがあります。

javascripttwitter-bootstrapcarousel
20
Jashua

他のすべてが整っていると仮定して、終了bodyタグの前にこれを追加してみてください：

<script type='text/javascript'>
    $(document).ready(function() {
         $('.carousel').carousel({
             interval: 2000
         })
    });    
</script>
34
David Taiaroa

enter image description here

同じ問題があり、解決策を見つけました。どちらもページの最後にjavascriptを配置するため、関数の呼び出しはそれらの後に配置する必要があります。

<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.js"></script>

<script type="text/javascript">
  var $ = jQuery.noConflict();
  $(document).ready(function() { 
      $('#myCarousel').carousel({ interval: 3000, cycle: true });
  }); 
</script>

http://twitterbootstrap.org/Twitter-bootstrap-3-carousel-not-automatically-starting/

9
Mujahidul Jahid

私はbootstrap 3角度で動作することについて何かを追加すると思いました。

アプリケーションがAngular内でどれだけ広範囲にあるかによっては、カルーセルのロードがわずかに遅れる場合があります。たとえば、カルーセルをテンプレートとしてロードします。これは、ドキュメントのロード後にわずかにロードするため、カルーセルを開始するコードにわずかなタイムアウトを追加する必要がありました。

        <div class="mWeb-container" ng-controller="mWebCtrl">
        <div ng-include="nav_tpl" ng-hide="print_layout"></div>
        <div ng-include="carousel_tpl" ng-hide="print_layout"></div>
        <div ng-include="breadcrumbs_tpl" ng-hide="print_layout"></div>
        <div ng-view=""></div>
        <div ng-include="comments_tpl" ng-hide="print_layout"></div>
        <div ng-include="footer_tpl" ng-hide="print_layout"></div>
    </div>
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript" src="angular/scripts/vendor/bootstrap.min.js"></script>
    <script type="text/javascript">
    <!--
        $(document).ready(function(){
            var mCarouselTO = setTimeout(function(){
            $('#Carousel').carousel({
                interval: 3000,
                cycle: true,
            }).trigger('slide');
            }, 2000);
            var q = mCarouselTO;
        });
    -->
    </script>
8
kronus

私は同じ問題を抱えていたので、data-ride="carousel" from bootstrap caruosel。コードで確認してください。 Links Bootstrap doc

3
Ali Madadi

JavaScriptコードは不要です。データ属性を使用して自動変更するように設定できますdata-interval="1000"

アイテムを自動的に循環させるまでの遅延時間。 falseの場合、カルーセルは自動的に循環しません。

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

http://getbootstrap.com/javascript/#carousel

2
John Magnolia

私はこれに何ヶ月も座っていましたが、アセットをプリコンパイルするたびに、間違った何かがアセットのパブリック/フォルダに入り、何かが機能していませんでした。古いアセットを機能させるために、public/assetsフォルダーにコピーする必要がありました。長い間、どの順序でインポートを行う必要があり、どのステートメントが既に動作しているものを破壊しているのかを把握しようとしました。

結局のところ、私の解決策は、これらをインポートする必要があるということです。

//= require jquery
//= require jquery_ujs
//= require Twitter/bootstrap
//= require_tree .

また、スクリプトを入れないでください。 start.carousel-scriptをapplication.jsファイルに追加します。次のようにapplication.html.erbファイルに配置すると：

<%= javascript_include_tag "application" %>

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

エバーシングは正常に動作します。通知：nderでなければ、include_tagアプリケーションは動作しません。

注意2：googlemapsスクリプトも持っていますが、マップが存在するファイルにインポートされるのは（！）だけです。次のスクリプトです。

<script src="https://maps.googleapis.com/maps/api/js?key=KEY&sensor=false"></script>

これが他の人の時間の節約に役立つことを本当に願っています。それほど明白ではないことがいくつかあります。

1
Niko

これは私に起こりました。しかし-一時停止のオプションがあります： 'hover'はデフォルト設定です。

そして、このオプションにより、フルスクリーンスライダーはもちろん、最初のスライドでも停止しました;）したがって、一時停止をfalseまたは「ホバー」以外の何かに設定してください。

0
Martin Klasson

反応を使用している人に追加するために、次の操作を行うとサイクルがトリガーされます。

componentDidMount(){
    this.setState({activeIndex:0})
}
0
TacoEater