Home/ Questions/Q 8918569
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-15T05:47:20+00:00

when loading the page , my console says: $(‘.carousel’).carousel is not a function the

  • 0

when loading the page , my console says:

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

the generated html source code (i use symfony & twig files) look like this :

<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>

Would anyone spot what’s wrong?
cheers

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    change your javascript at the end to the following..

    <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>

    the jquery library needs to be the first script file included, then the bootstrap.js file.

    Only include the following script files if you didnt include them all within the bootstrap download package..

    <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>
    • 0