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 移动到第一行（并删除其中一个，因为它们本质上是相同的）。

于 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 回答