Slick Carousel Uncaught TypeError slick is not a function

Question

Somehow I m unable to use slick carousel  http   kenwheeler github io slick   correctly    I m getting the following error   Uncaught TypeError         slick is not a function   I m running the following code in my javascript file    function initSlider            references   slick           dots  false          infinite  true          speed  300          slidesToShow  1          autoplay  true          prevArrow    lt div class  slick-prev  gt  lt i class  fa fa-chevron-left  gt  lt  i gt  lt  div gt            nextArrow    lt div class  slick-next  gt  lt i class  fa fa-chevron-right  gt  lt  i gt  lt  div gt               I ve included the latest jQuery version  2 1 4  with bower  I ve also tried including the jQuery CDN in the head of my layout template file  but that didn t resolve anything either   The only thing strange that could mean something is that when I don t use a function to call the slider  it does work but it gives me the error   Uncaught TypeError  Cannot read property  add  of null   I found out that that means that the code has been loaded before the DOM was loaded  which is correct  I think    Thanks in advance   Edit  I ve created a JSFiddle from my code  https   jsfiddle net brz30e77   EDIT2  The error persisted every now and then when adding new function to my JS file  I ultimately stripped my concatenated JS file and found out that there were two versions of jQuery being loaded  of which one was very  very old

User · Answer

It s hard to tell without looking at the full code but this type of error  Uncaught TypeError         slick is not a function   Usually means that you either forgot to include slick js in the page or you included it before jquery   Make sure jquery is the first js file and you included the slick js library after it

User · Answer

In Laravel i solve with  app sccs    slick  import  quot  slick-carousel slick slick quot    import  quot  slick-carousel slick slick-theme quot    bootstrap js try      window Popper   require  popper js   default     window     window jQuery   require  jquery       require  bootstrap       require  slick      require  slick-carousel       package json  quot jquery quot    quot  3 2 quot    quot slick quot    quot  1 12 2 quot    quot slick-carousel quot    quot  1 6 0 quot   example js     testimonial-active   slick       dots  false      arrows  true      prevArrow    lt span class  quot prev quot  gt  lt i class  quot mdi mdi-arrow-left quot  gt  lt  i gt  lt  span gt        nextArrow    lt span class  quot next quot  gt  lt i class  quot mdi mdi-arrow-right quot  gt  lt  i gt  lt  span gt        infinite  true      autoplay  true      autoplaySpeed  5000      speed  800      slidesToShow  1

User · Answer

I solve this by simply add  https   to slick cdn link gotfrom slick

User · Answer

Thought this would be helpful for others with the same issue  as I ve seen a few on here - I ran into this  but found I loaded slick js AFTER my main js  which was calling the slick   function   swapped the two and it works great

User · Answer

I ve had the same problem before recognized that I ve put the code after closing the body tag  After moving it into  tag  it s OK now   lt body gt    document  ready function            multiple-items   slick           infinite  true          slidesToShow  3          slidesToScroll  3              lt  body gt

User · Answer

For me  the problem resolves after I changed    lt script type  text javascript  src        path-to-slick slick min js  gt  lt  script gt   to   lt script src        path-to-slick slick min js  gt  lt  script gt   My work is based on Jquery 2 2 4  and I m running my development on the latest Xampp and Chrome

User · Answer

I found that I initialised my slider using inline script in the body  which meant it was being called before slick js had been loaded  I fixed using inline JS in the footer to initialise the slider after including the slick js file     lt script type  text javascript  src   slick slick min js  gt  lt  script gt   lt script gt          autoplay   slick           slidesToShow  1          slidesToScroll  1          autoplay  true          autoplaySpeed  4000            lt  script gt

User · Answer

I found the solution myself later  so I placed it as an answer   The error persisted every now and then when adding new function to my JS file  I ultimately stripped down my concatenated JS file and found out that there were two versions of jQuery being loaded  of which one was very  very old

User · Answer

Try   function initSlider            references   slick           dots  false          infinite  true          speed  300          slidesToShow  1          autoplay  true          prevArrow    lt div class  slick-prev  gt  lt i class  fa fa-chevron-left  gt  lt  i gt  lt  div gt            nextArrow    lt div class  slick-next  gt  lt i class  fa fa-chevron-right  gt  lt  i gt  lt  div gt                document  on  ready   function          initSlider          Also just to be sure  make sure that you include the JS file for the slider after you include jQuery and before you include the code above to initialise

User · Answer

In my instance the solution was moving the jQuery include just before the  lt  head gt  tag   With the Slick include at the bottom before the  lt  body gt  and just before my script include that initiates the slider

User · Answer

Old question  but I have only one recent jQuery file  v3 2 1  included  slick is also included  of course   and I still got this problem  I fixed it like this   function initSlider selector  options        if    fn slick              selector  slick options         else           setTimeout function                 initSlider selector  options              500              example  initSlider   references       slick s options         This function tries to apply slick 2 times a second and stops after get it working  I didn t analyze it deep  but I think slick s initialization is being deferred

User · Answer

Recently had the same problem  TypeError         slick is not a function  Found an interesting solution  Hope  it might be useful to somebody   In my particular situation there are  jQuery   WHMCS   slick  It works normal standalone  without WHMCS  But after the integration to WHMCS an error appears   The solution was to use jQuery in noConflict mode   Ex  Your code     document  ready function           a   click  function event          this  hide        event preventDefault                Code in noConflict mode   var  jq   jQuery noConflict     jq document  ready function         jq  a   click  function event         jq this  hide        event preventDefault                The solution was found here  http   zenverse net jquery-how-to-fix-the-is-not-a-function-error-using-noconflict

User · Answer

I m not 100  sure  but I believe the error was caused by some client-side JavaScript that was turning exports into an object  Some code in the Slick plugin  see below  calls the require function if exports is not undefined   Here s the portion of code I had to change in slick js  You can see I am just commenting out the if statements  and  instead  I m just calling factory jQuery      function factory    console log  slick in factory   define   exports   exports   factory   factory    use strict      if  typeof define      function   amp  amp  define amd           define   jquery    factory        else if  typeof exports      undefined            module exports   factory require  jquery          else          factory jQuery        factory jQuery

User · Answer

You failed to load the slick js file  Add this script file https   kenwheeler github io slick slick slick js   I updated your JSFiddle by adding an external file on left sidebar External Resources  Then it doesn t report the error         slick is not a function

User · Answer

I had the same problem  When i was trying and testing on a browser on my PC machine i didn t have the  not a function  error  but when i tried on a virtual machine the error was popping  I d solved it by adding the slick files on my web server and adding the urls of the css and js files from my web server to my html  Before that i was pulling the css and js from CDN

[javascript] Slick Carousel Uncaught TypeError: $(...).slick is not a function

Examples related to javascript

Examples related to jquery

Examples related to slick.js

Examples related to typeerror