1

ページをロードするとき、私のコンソールは次のように言います：

                $('.carousel').carousel is not a function

生成された html ソース コード (symfony と twig ファイルを使用) は次のようになります。

<body>        

<div class="container">
    <div class="row">
           <div class="span6 well">
                 <div id="myCarousel" class="carousel">
                       <!-- Carousel items -->
                         <div class="carousel-inner">
                                    <div class="active item"><img alt="" src="/projet_etienne_auth/web/bundles/etiennepsav/images/carousel1.jpg"></div>
                                    <div class="item"><img alt="" src="/projet_etienne_auth/web/bundles/etiennepsav/images/carousel2.jpg"></div>
                         </div>
                        <!-- Carousel nav -->
                        <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
                       <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
                </div>
         </div>
    </div>
</div>  


<!-- Le javascript
================================================== -->  

    <script rel="javascript" href="/projet_etienne_auth/web/bundles/etiennepsav/js/bootstrap.js" type="text/javascript" media="all" ></script>
    <script rel="javascript" href="/projet_etienne_auth/web/bundles/etiennepsav/js/jquery-1.8.3.js" type="text/javascript" media="all" ></script>  
    <script rel="javascript" href="/projet_etienne_auth/web/bundles/etiennepsav/js/bootstrap-carousel.js" type="text/javascript" media="all" ></script> 
    <script rel="javascript" href="/projet_etienne_auth/web/bundles/etiennepsav/js/bootstrap-transition.js" type="text/javascript" media="all" ></script> 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

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

       </script>

誰かが間違っていることを見つけますか？乾杯

4

3 に答える 3

7

最後にJavaScriptを次のように変更してください..

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script rel="javascript" href="/projet_etienne_auth/web/bundles/etiennepsav/js/bootstrap.js" type="text/javascript" media="all" ></script>
<script type="text/javascript">
$(document).ready(function() {
  $('.carousel').carousel();
});
</script>

jquery ライブラリは、最初に含まれるスクリプト ファイルである必要があり、次に bootstrap.js ファイルである必要があります。

ブートストラップ ダウンロード パッケージ内にすべてを含めなかった場合は、次のスクリプト ファイルのみを含めます。

<script rel="javascript" href="/projet_etienne_auth/web/bundles/etiennepsav/js/bootstrap-transition.js" type="text/javascript" media="all" ></script> 
<script rel="javascript" href="/projet_etienne_auth/web/bundles/etiennepsav/js/bootstrap-carousel.js" type="text/javascript" media="all" ></script>
于 2012-11-28T02:24:39.473 に答える
2

jquery ライブラリへの二重エントリがあるようです。

また、jquery.min または jquery-1.8.3 を最初の行に移動します (本質的に同じであるため、そのうちの 1 つも削除します)。

于 2012-11-28T02:18:07.790 に答える
0

最後に、カルーセルを含むboostrap.jsを再度ダウンロードしました

     http://twitter.github.com/bootstrap/customize.html

このように私のhtmlの頭に入れます

          <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
          <script rel="javascript" href="{{ asset('bundles/etiennepsav/js/bootstrap.js') }}" type="text/javascript" media="all" ></script>


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

symfony プロジェクトから Web フォルダ全体を削除しました

次に、コンソールコマンドを使用してリロードしました

      php app/console assets:install web
于 2012-11-28T10:53:52.727 に答える