Uncaught TypeError: $(...).carousel is not a function JQuery Error

JavaScript
1

Im getting the following error while trying to execute carousel code…

Uncaught TypeError: $(…).carousel is not a function

Below is my jquery code:

   $('#myCarousel').carousel({
	interval:   3000
 	});

Below is my html code

  <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
   
   <div class="container">
<div class="row">
	<div class="col-md-4">
        <!-- Carousel
        ================================================== -->
        <div id="myCarousel" class="carousel slide">        
            <div class="carousel-inner">           
                <div class="item active"> 
                	<a href="#"><img class="thumbnail" src="http://placehold.it/600x400/" alt="Slide1"></a>
                    <div class="caption">
                   	  <h4>Lorem ipsum dolor sit amet, consetetur sadipscing elitr</h4>
                        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </p>
                    </div>
                </div>
                <div class="item"> 
                	<a href="#"><img class="thumbnail" src="http://placehold.it/600x400/" alt="Slide2"></a>
                    <div class="caption">
                   	  <h4>Lorem ipsum dolor sit amet, consetetur sadipscing elitr</h4>
                        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </p>
                    </div>                                                           
                 </div>  
                <div class="item"> 
                	<a href="#"><img class="thumbnail" src="http://placehold.it/600x400/" alt="Slide3"></a>
                    <div class="caption">
                   	  <h4>Lorem ipsum dolor sit amet, consetetur sadipscing elitr</h4>
                        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </p>
                    </div>                        
                </div>                                                                                   
            </div>
             <!-- Indicators -->
              <ol class="carousel-indicators">
                <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                <li data-target="#myCarousel" data-slide-to="1"></li>
                <li data-target="#myCarousel" data-slide-to="2"></li>
              </ol>                                                                 
        </div><!-- End Carousel -->  
	</div>
</div>

ITS working fine in bootsnip…I tried to execute in my pc …its showing the above error.

Below is my bootsnip link
http://bootsnipp.com/user/snippets/y8by1

2

Hi,

The error message means that the carousel library is not present on the page at the point when you are trying to use it.

Try changing the order of HTML / scripts:

  <body>
    <!-- HTML here -->

    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script src="path/to/carousel/lib"></script>
    <script> // Custom JS here </script>
  </body>
</html>

The bootsnip link requires login creds, so I couldn’t check your example.

1 Like
3

@pullo…Thanks for the suggestion …

Below is the snipp link

4

No worries. The snippet works, so it seems to me that you have forgotten to include a library or have things in the wrong order. If you still can’t get it to work, maybe post the complete HTML file you are trying to run on your PC.

5

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.