TypeError: $(...).slick is not a function in jQuery [Fixed]

TypeError: $(...).slick is not a function in jQuery #

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

Forgetting to include the slick library.
Loading the slick library before the jQuery library.
Loading the jQuery library twice.
Specifying an incorrect path to the jQuery files.

To solve the error, make sure to load the jQuery library before loading the slick library.

The libraries have to be loaded only once on the page, otherwise, the error is thrown.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />

    <!-- ✅ Load slick CSS ✅ -->
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.css"
      integrity="sha512-wR4oNhLBHf7smjy0K4oqzdWumd+r5/+6QO/vDda76MW5iug4PT7v86FoEkySIJft3XA0Ae6axhIvHrqwm793Nw=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    />

    <!-- ✅ Load slick theme CSS ✅ -->
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css"
      integrity="sha512-17EgCFERpgZKcm0j0fEq1YCJuyAWdz9KUtv1EjVuaOz8pDnh/0nZxmU6BBXwaaxqoi9PQXnRWqlcDB027hgv9A=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    />
  </head>

  <body>
    <div class="single-item" style="width: 30%">
      <div>Content 1</div>
      <div>Content 2</div>
      <div>Content 3</div>
    </div>

    <!-- ✅ load jQuery ✅ -->
    <script
      src="https://code.jquery.com/jquery-3.6.0.min.js"
      integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
      crossorigin="anonymous"
    ></script>

    <!-- ✅ load Slick ✅ -->
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"
      integrity="sha512-XtmMtDEcNz2j7ekrtHvOVR4iwwaD6o/FUJe6+Zq+HgcCsk3kj4uSQQR8weQ2QVj1o0Pk6PwYLohm206ZzNfubg=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    ></script>

    <script src="index.js"></script>
  </body>
</html>

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

Load the CSS and the theme for the Slick library.
Load the jQuery library.
Load the Slick library.
Run the code in our index.js file.

If you load the Slick library before loading jQuery, you would get the error.

Here's the code for the index.js file.

index.js

Copied!
$(document).ready(function () {
  $('.single-item').slick({
    dots: true,
    centerMode: true,
  });
});

If you open the page you will see the carousel load.

If the error persists, try to use the noConflict mode of jQuery.

index.js

Copied!
// 👇️ using noConflict mode
const $jq = jQuery.noConflict();

$jq(document).ready(function () {
  $jq('.single-item').slick({
    dots: true,
    centerMode: true,
  });
});

Make sure you aren't loading the jQuery library twice. Loading the library twice will re-run the initialization process and will cause the error.

If you are loading the libraries from files on your local file system, make sure to specify the paths to the files correctly. Specifying an incorrect path to a script is equivalent to not loading the script at all.

You can check if you're loading the scripts correctly by opening your Developer tools by pressing F12 and clicking on the Console tab.

If you see any 404 errors related to loading the jQuery scripts, then the path to the file is incorrect.

Lastly, try to load the most recent versions of the jQuery and Slick libraries.

Conclusion #

To solve the "$(...).slick is not a function" jQuery error, make sure to load the jQuery library before loading the slick library.

The libraries have to be loaded only once on the page, otherwise, the error is thrown.

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.

You can use the search field on my Home Page to filter through all of my articles.

TypeError: $(...).slick is not a function in jQuery [Fixed]

TypeError: $(...).slick is not a function in jQuery #

Conclusion #

Borislav Hadzhiev