'Slick Carousel Uncaught TypeError: $(...).slick is not a function

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: '<div class="slick-prev"><i class="fa fa-chevron-left"></i></div>',
        nextArrow: '<div class="slick-next"><i class="fa fa-chevron-right"></i></div>'
    });
}

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.

Solution 1:^[1]

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.

Solution 2:^[2]

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/

Solution 3:^[3]

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.

Solution 4:^[4]

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.

Solution 5:^[5]

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

Solution 6:^[6]

Try:

function initSlider(){
    $('.references').slick({
        dots: false,
        infinite: true,
        speed: 300,
        slidesToShow: 1,
        autoplay: true,
        prevArrow: '<div class="slick-prev"><i class="fa fa-chevron-left"></i></div>',
        nextArrow: '<div class="slick-next"><i class="fa fa-chevron-right"></i></div>'
    });
}

$(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.

Solution 7:^[7]

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.

Solution 8:^[8]

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.

Solution 9:^[9]

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' && define.amd) {
//     define(['jquery'], factory);
// } else if (typeof exports !== 'undefined') {
//     module.exports = factory(require('jquery'));
// } else {
//     factory(jQuery);
// }
factory(jQuery);
}

Solution 10:^[10]

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.

<script type="text/javascript" src="/slick/slick.min.js"></script>
<script>
    $('.autoplay').slick({
        slidesToShow: 1,
        slidesToScroll: 1,
        autoplay: true,
        autoplaySpeed: 4000,
    });

</script>

Solution 11:^[11]

In my instance the solution was moving the jQuery include just before the </head> tag. With the Slick include at the bottom before the </body> and just before my script include that initiates the slider.

Solution 12:^[12]

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

<body>
$(document).ready(function(){
    $('.multiple-items').slick({
        infinite: true,
        slidesToShow: 3,
        slidesToScroll: 3
    });
});
</body>

Solution 13:^[13]

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

Solution 14:^[14]

you didnt include the reference of slick

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>

Solution 15:^[15]

Please check the cnd or slick.min.js is properly linked. if slick.min.js is not properly linked then it shows this type of error.

https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.js

Solution 16:^[16]

Include the script tag before the slick function is used in your HTML template

<script type="text/javascript" src="http://cdn.jsdelivr.net/jquery.slick/1.3.15/slick.min.js"></script>

Solution 17:^[17]

If you want to control the slider of Slick.js you can use

For Next

$('slick_selector').slick("slickNext");

For Prev

$('slick_selector').slick("slickPrev");

For version > 1.5

Solution 18:^[18]

For me, the problem resolves after I changed:

<script type='text/javascript' src='../../path-to-slick/slick.min.js'></script>

<script src='../../path-to-slick/slick.min.js'></script>

My work is based on Jquery 2.2.4, and I'm running my development on the latest Xampp and Chrome.

Solution 19:^[19]

In Laravel i solve with:

app.sccs

// slick
@import "~slick-carousel/slick/slick";
@import "~slick-carousel/slick/slick-theme";

bootstrap.js

try {
   window.Popper = require('popper.js').default;
   window.$ = window.jQuery = require('jquery');
   require('bootstrap');
   require('slick')
   require('slick-carousel')
}

package.json

"jquery": "^3.2",
"slick": "^1.12.2",
"slick-carousel": "^1.6.0"

example.js

$('.testimonial-active').slick({
    dots: false,
    arrows: true,
    prevArrow: '<span class="prev"><i class="mdi mdi-arrow-left"></i></span>',
    nextArrow: '<span class="next"><i class="mdi mdi-arrow-right"></i></span>',
    infinite: true,
    autoplay: true,
    autoplaySpeed: 5000,
    speed: 800,
    slidesToShow: 1,
});

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Sanderfish
Solution 2
Solution 3	Joy
Solution 4	Federico Giust
Solution 5
Solution 6	Daniel Waghorn
Solution 7	Waldson Patricio
Solution 8	MartinTheCreator
Solution 9	Dox
Solution 10
Solution 11	s15199d
Solution 12
Solution 13	Anthony
Solution 14	Suraj Rao
Solution 15	Mahfujur Rahman
Solution 16	Gopika
Solution 17	Suraj Rao
Solution 18	Frederick Chan
Solution 19	Luis Candelario

'Slick Carousel Uncaught TypeError: $(...).slick is not a function

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]

Solution 6:[6]

Solution 7:[7]

Solution 8:[8]

Solution 9:[9]

Solution 10:[10]

Solution 11:[11]

Solution 12:[12]

Solution 13:[13]

Solution 14:[14]

Solution 15:[15]

Solution 16:[16]

Solution 17:[17]

Solution 18:[18]

Solution 19:[19]