Solve - $(...).carousel is not a function jQuery Error

avatar

Borislav Hadzhiev

Tue Oct 19 20212 min read

banner

Photo by Elyse Turton

Solve - $(...).carousel is not a function #

The "$(...).carousel is not a function" jQuery error occurs for multiple reasons:

  1. Forgetting to include the Bootstrap JS library.
  2. Loading the Bootstrap JS library before the jQuery library.
  3. Loading the jQuery library twice.
  4. Specifying an incorrect path to the jQuery or Bootstrap files.

jquery carousel is not a function error

To solve the "$(...).carousel is not a function" jQuery error, make sure to load the jQuery library before loading the Bootstrap JS library. The libraries have to be loaded only once on the page, otherwise the error is thrown.

index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <!-- ✅ Load Bootstrap CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous" /> </head> <body> <!-- 👇️ Example carousel --> <div id="carouselExampleControls" class="carousel slide" data-ride="carousel" > <div class="carousel-inner"> <div class="carousel-item active"> <svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: First slide" > <title>Placeholder</title> <rect width="100%" height="100%" fill="#777"></rect> <text x="50%" y="50%" fill="#555" dy=".3em">First slide</text> </svg> </div> <div class="carousel-item"> <svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: First slide" > <title>Placeholder</title> <rect width="100%" height="100%" fill="#777"></rect> <text x="50%" y="50%" fill="#555" dy=".3em">Second slide</text> </svg> </div> <div class="carousel-item"> <svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: First slide" > <title>Placeholder</title> <rect width="100%" height="100%" fill="#777"></rect> <text x="50%" y="50%" fill="#555" dy=".3em">Third slide</text> </svg> </div> </div> <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev" > <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next" > <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> <!-- ✅ load jQuery ✅ --> <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous" ></script> <!-- ✅ load Bootstrap JS ✅ --> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous" ></script> <!-- ✅ Load your JS file ✅ --> <script src="index.js"></script> </body> </html>

The order we loaded the scripts in is very important. The order is the following:

  1. Load the Bootstrap CSS file.
  2. Load the jQuery library.
  3. Load the Bootstrap library.
  4. Run your JS file (index.js in the example).

Here's the content of the index.js file.

index.js
$(document).ready(function () { $('.carousel').carousel({ interval: 350 * 10, }); });

We wait for the DOM to be ready before rendering the carousel. If you open your browser, you'll see the carousel component.

jquery carousel

If you are still getting the error make sure you're loading the Bootstrap library after loading jQuery and you're not loading either of the libraries twice on the page.

Loading the jQuery library twice on the same page re-initializes the process and causes the error.

When loading the libraries from files on your local files system, make sure that the paths you specify are correct and point to the right files.

Specifying an incorrect path to the jQuery or Bootstrap scripts is equivalent to not loading the scripts at all.

You can check if the specified paths are correct by opening the console in your browser and checking if you have any 404 errors related to loading the jQuery or Bootstrap libraries.

Use the search field on my Home Page to filter through my more than 1,000 articles.