twitter bootstrap carousel无法正常工作(symfony2项目)

Question

twitter bootstrap carousel无法正常工作(symfony2项目)

Mat*_*eil 1 javascript carousel symfony twitter-bootstrap

加载页面时,我的控制台说:

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

Run Code Online (Sandbox Code Playgroud)

生成的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>

Run Code Online (Sandbox Code Playgroud)

有人会发现什么是错的吗？干杯

Answer 1

Yoh*_*ohn 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>

Run Code Online (Sandbox Code Playgroud)

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>

Run Code Online (Sandbox Code Playgroud)

归档时间：	12 年，12 月前
查看次数：	7168 次
最近记录：	12 年，11 月前