Solutions For Error: TypeError: $(…).slick is not a Function in jQuery

Posted on by Tom Joseph
TypeError: $(…).slick is not a function in jQuery

JQuery is a JavaScript library pre-built with many features that help our program quickly. JQuery is integrated with many different modules. However, when using it, we often encounter many errors, especially TypeError: $(…).slick is not a function in jQuery.

Why does the TypeError: $(…).slick is not a function in jQuery happen? 

There are two most common reasons for this error. The first reason is that loading libraries out of order and having 2 instances of jQuery loaded simultaneously. Here is an example of the faulty code:

<!DOCTYPE html>
<head>
   <title>Document</title>
</head>
<body>
</body>
<!-- load slick -->
<script 
   src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/s;
   ick.min.js" 
   integrity="sha512-XtmMtDEcNz2j7ekrtHvOVR4iwwaD6o/FUJe6+Zq+HgcCsk3kj
   4uSQQR8weQ2QVj1o0Pk6PwYLohm206ZzNfubg=="crossorigin="anonymous" 
   referrerpolicy="no-referrer"></script>
<!-- load jquery -->
<script 
   src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min
   .js" 
   integrity="sha512-aVKKRRi/Q/YV+4mjoKBsE4x3H+BkegoM/em46NNlCqNTmUYAD
   jBbeNefNxYV7giUp0VxICtqdrbqU7iVaeZNXA==" crossorigin="anonymous" 
   referrerpolicy="no-referrer"></script>
<script src="main.js"></script>
</html><!DOCTYPE html>
<head>
   <!-- load slick css -->
   <link rel="stylesheet" 
      href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/s
      lick-theme.min.css" 
      integrity="sha512-17EgCFERpgZKcm0j0fEq1YCJuyAWdz9KUtv1EjVuaOz8pDnh/
      0nZxmU6BBXwaaxqoi9PQXnRWqlcDB027hgv9A==" crossorigin="anonymous" 
      referrerpolicy="no-referrer" />
   <!-- load slick theme -->
   <link rel="stylesheet" 
      href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/s
      lick.min.css" 
      integrity="sha512-yHknP1/AwR+yx26cB1y0cjvQUMvEa2PFzt1c9LlS4pRQ5NOTZ
      FWbhBig+X9G9eYW/8m0/4OXNx8pxJ6z57x0dw==" crossorigin="anonymous"
      referrerpolicy="no-referrer" />
   <title>Document</title>
</head>
<body>
</body>
<!-- load slick -->
<script 
   src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/sl
   ick.min.js" 
   integrity="sha512-XtmMtDEcNz2j7ekrtHvOVR4iwwaD6o/FUJe6+Zq+HgcCsk3kj
   4uSQQR8weQ2QVj1o0Pk6PwYLohm206ZzNfubg==" crossorigin="anonymous" 
   referrerpolicy="no-referrer"></script>
<!-- load jquery -->
<script 
   src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.
   js"></script>
<!-- Script -->
<script type="text/javascript">
   $(".slider").slick();
   
</script>
</html>

Output

slick.min.js:1 Uncaught ReferenceError: jQuery is not defined
    at slick.min.js:1:152
    at slick.min.js:1:160
index.html:71 Uncaught TypeError: $(...).slick is not a function
    at index.html:71:18

This code throws an error because of loading the Slick library before loading the jQuery library.

How to fix this error?

Make sure the library download order is correct

To fix the “TypeError: $(…).slick is not a function” in jQuery, we have to load the Jquery library before loading the Slick library, and libraries only load once on the page.

You can refer to the solution below.

In the file index.html:

<!DOCTYPE html>
<head>
   <!-- load slick css -->
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/s
      lick-theme.min.css" 
      integrity="sha512-17EgCFERpgZKcm0j0fEq1YCJuyAWdz9KUtv1EjVuaOz8pDnh/
      0nZxmU6BBXwaaxqoi9PQXnRWqlcDB027hgv9A==" crossorigin="anonymous" 
      referrerpolicy="no-referrer" />
   <!-- load slick theme -->
   <link rel="stylesheet" 
      href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/s
      lick.min.css" 
      integrity="sha512-yHknP1/AwR+yx26cB1y0cjvQUMvEa2PFzt1c9LlS4pRQ5NOTZ
      FWbhBig+X9G9eYW/8m0/4OXNx8pxJ6z57x0dw==" crossorigin="anonymous" 
      referrerpolicy="no-referrer" />
   <title>Document</title>
</head>
<body>
   <div class="slider">
      <div>
         <h3>slider 1</h3>
      </div>
      <div>
         <h3>slider 2</h3>
      </div>
      <div>
         <h3>slider 3</h3>
      </div>
      <div>
         <h3>slider 4</h3>
      </div>
      <div>
         <h3>slider 5</h3>
      </div>
   </div>
</body>
<!-- load jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.
   js"></script>
<!-- load slick -->
<script 
   src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/sl
   ick.min.js" 
   integrity="sha512-XtmMtDEcNz2j7ekrtHvOVR4iwwaD6o/FUJe6+Zq+HgcCsk3kj
   4uSQQR8weQ2QVj1o0Pk6PwYLohm206ZzNfubg==" crossorigin="anonymous" 
   referrerpolicy="no-referrer"></script>
<!-- Script -->
<script type="text/javascript">
   $(".slider").slick({
   
       dots: true,
   
       slidesToShow: 3,
   
       slidesToScroll: 3,
   
   });
   
</script>
</html>

Library loading order is in the following order:

  • Load the Jquery library.
  • Load the Slick library.

Load a single jQuery instance

On the other hand, if we load two versions of the jQuery library together, an error will arise. The solution is we should load a single jQuery instance to fix the TypeError: $(…).slick is not a function in jQuery.

You can refer to the solution below.

<!DOCTYPE html>
<head>
   <!-- load slick css -->
   <link rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/s
      lick-theme.min.css" 
      integrity="sha512-17EgCFERpgZKcm0j0fEq1YCJuyAWdz9KUtv1EjVuaOz8pDnh/
      0nZxmU6BBXwaaxqoi9PQXnRWqlcDB027hgv9A==" crossorigin="anonymous"
      referrerpolicy="no-referrer" />
   <!-- load slick theme -->
   <link rel="stylesheet" 
      href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/s
      lick.min.css" 
      integrity="sha512-yHknP1/AwR+yx26cB1y0cjvQUMvEa2PFzt1c9LlS4pRQ5NOTZ
      FWbhBig+X9G9eYW/8m0/4OXNx8pxJ6z57x0dw==" crossorigin="anonymous" 
      referrerpolicy="no-referrer" />
   <title>Document</title>
</head>
<body>
</body>
<!-- load jquery -->
<script 
   src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.
   js"></script>
<!-- load slick -->
<script 
   src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/sl
   ick.min.js" 
   integrity="sha512-XtmMtDEcNz2j7ekrtHvOVR4iwwaD6o/FUJe6+Zq+HgcCsk3kj
   4uSQQR8weQ2QVj1o0Pk6PwYLohm206ZzNfubg==" crossorigin="anonymous"
   referrerpolicy="no-referrer"></script>
</html>

Summary

In short, to fix the TypeError: $(…).slick is not a function in jQuery, we need to load libraries in the correct order. Library loading order is quite essential and loads only 1 version Only jQuery. Let’s try this method to get your desired results. Good luck for you!

Maybe you are interested:

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *