14

Twitter のカルーセル (最新バージョン) でブートストラップを使用していますが、動作していますが、自動的にスライドしません。ナビゲーション ボタンの 1 つをクリックすると、うまく機能します。なぜこれを行っているのかわかりません。

ヘッダーでの私の JS セットアップは次のとおりです。

    <script type="text/javascript" src="<?php echo tz_JS . '/bootstrap/jquery.js'; ?>"></script>

<script type="text/javascript" src="<?php echo tz_JS . '/bootstrap/bootstrap-carousel.js'; ?>"></script>
<script type="text/javascript" src="<?php echo tz_JS . '/bootstrap/bootstrap-transition.js'; ?>"></script>

そしてHTML：

<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">

    <div class="active item">
    <div class="image-position-right">
        <a href="#"><img src="validimagelink.jpg" width="920" height="550" alt=""></a>
    </div>
    </div>


    <div class="item">
    <div class="image-position-right">
        <a href="#"><img src="validimagelink.jpg" width="920" height="550" alt=""></a>
    </div>
    </div>

</div>

<a class="left carousel-control" href="#myCarousel" data-slide="prev">‹&lt;/a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">›&lt;/a>

また、これを無駄に追加しました：

<script>
$('#myCarousel').carousel({
    interval: 1200
});
</script>

上記の変更を行った後、javascript コンソールには次のように表示されます。

Uncaught TypeError: Object # has no method 'carousel' (anonymous function) b.extend.ready jquery.min.js:29 u

なぜこれが機能しないのかについて何か考えはありますか?

4

5 に答える 5

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

それでも機能しない場合は、ブラウザの (firebug/chrome..) コンソールで潜在的なエラーを探します。

為に

Uncaught TypeError: Object # has no method 'carousel' (anonymous function) b.extend.ready jquery.min.js:29 u

確実に：

jQueryが1つだけ含まれています

bootstrap-carousel.js または bootstrap.js が 1 つだけ含まれています。

jQuery が最初に含まれ、次に bootstrap-carousel.js または bootstrap.js、次に $(document).ready( ...

于 2012-06-27T19:37:29.227 に答える
4

間違ったバージョンの JQuery を使用すると、Twitter の Boostrap カルーセルのアクションに影響を与えることがあります。現在、v1.7.1 を実行しています。別の方法を使用している場合、エラーが発生している可能性があります。

v1.7.1 を実行していない場合は、ここからダウンロードできます。

http://code.jquery.com/jquery-1.7.1.min.js

また、コードが準備が整ったドキュメントにラップされていることを確認してください。

  $(document).ready(function () {
      // code here
  });
于 2012-06-27T19:37:58.900 に答える
1

私はあなたと同じ問題を抱えていて、解決策を見つけました。どちらも 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 });
});

カルーサルの後に JavaScript ファイルを配置する必要がある場合があります。実際にはページの終わりの前に。

参照: http://twitterbootstrap.org/twitter-bootstrap-3-carousel-not-automatically-starting/

ハッピーコーディング。ありがとう

于 2014-02-03T17:28:21.020 に答える