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

avatar

Borislav Hadzhiev

Tue Oct 19 20212 min read

banner

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.

index.html
<!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 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.

index.js
$(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.
index.js
// ๐Ÿ‘‡๏ธ 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.

Join my newsletter

I'll send you 1 email a week with links to all of the articles I've written that week

Buy Me A Coffee