twitter 引导轮播无法正常工作（symfony2 项目）答案

【问题标题】：twitter bootstrap carousel not working properly ( symfony2 project )twitter 引导轮播无法正常工作（symfony2 项目）
【发布时间】：2012-11-28 02:15:10
【问题描述】：

加载页面时，我的控制台显示：

                $('.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>

有人会发现有什么问题吗？干杯

【问题讨论】：

标签： javascript symfony twitter-bootstrap carousel

【解决方案1】：

将您的 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>

【讨论】：

【解决方案2】：

您的 jquery 库似乎有一个双重条目。

另外，将 jquery.min 或 jquery-1.8.3 移动到第一行（并删除其中一个，因为它们本质上是相同的）。

【讨论】：

非常感谢您的帮助

【解决方案3】：

最后我再次下载了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

【讨论】：