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


Borislav Hadzhiev

Tue Oct 19 20212 min read


Photo by Jamie Street

Solve - $(...).slick is not a function Error #

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

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

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.

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <!-- ✅ Load slick CSS ✅ --> <link rel="stylesheet" href="" integrity="sha512-wR4oNhLBHf7smjy0K4oqzdWumd+r5/+6QO/vDda76MW5iug4PT7v86FoEkySIJft3XA0Ae6axhIvHrqwm793Nw==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <!-- ✅ Load slick theme CSS ✅ --> <link rel="stylesheet" href="" 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="" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous" ></script> <!-- ✅ load Slick ✅ --> <script src="" integrity="sha512-XtmMtDEcNz2j7ekrtHvOVR4iwwaD6o/FUJe6+Zq+HgcCsk3kj4uSQQR8weQ2QVj1o0Pk6PwYLohm206ZzNfubg==" crossorigin="anonymous" referrerpolicy="no-referrer" ></script> <script src="index.js"></script> </body> </html>

The order of loading the scripts is very important. We loaded the scripts in the following order:

  1. Load the CSS and the theme for the Slick library
  2. Load the jQuery library
  3. Load the Slick library
  4. 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 in the index.js file.

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

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

If you are still getting the error try to use the noConflict mode of jQuery.
// 👇️ using noConflict mode const $jq = jQuery.noConflict(); $jq(document).ready(function () { $jq('.single-item').slick({ dots: true, centerMode: true, }); });

Make sure you are not loading the jQuery library twice. Loading the library twice will re-run the initialization process and 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 when you open the console in your browser. If you see any 404 errors related to loading the jQuery scripts, then the path to the file is incorrect.

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

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