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: '<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).

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.

Transudate

If you are trying to manage slick through npm, note: npm install slick-carousel. – Conditioning

Answer 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.

Transudate

Thanks for coming back and giving your answer - I did the exact same thing I had a template containing another Jquery CDN reference and it was stopping this from running on the page I needed it to. – Halflength

I have same issue but can't found other jquery version, – Nowak

These are the things you should check: Are you loading the right slick.js file? Are you loading the right jQuery file? Have you included jQuery before slick.js? Good luck. – Transudate

Answer 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/

Harvard

Answer 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.

Openhearth

You are definitely right. However, I've tried to include both jQuery and slick.js at different ways, but I can't seem to make it work. I tried adding it to the head of my layout template like this: <script src="code.jquery.com/jquery-2.1.4.js"></script> <script src="kenwheeler.github.io/slick/slick/slick.js"></script> but the error is still there. – Transudate

@Sandrino Check the Source panel on Chrome DevTool. Check whether the two JS files are loaded correctly. – Openhearth

They are being loaded in the following order: localhost.sites > (no domain) > code.jquery.com > kenwheeler.github.io > use.typekit.net. Seems right to me? – Transudate

If you type in $(...).slick on the console and it reports the error, it means the file is not loaded correctly. – Openhearth

I'm indeed getting an error, but the Sources tab says it is being loaded. When I include both the libraries my combined JS file starts with jQuery and slick.js comes right after that.. I've also tried adding the library/libraries in the body of the desired page, but that gives the same error. – Transudate

Are you sure it doesn't have anything to do with the fact that I placed it in a function and initialised that function later? I know removed the function and it works as it should. Is someone able to explain that? – Transudate

Answer 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.

Portillo

Answer 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

Breaux

Answer 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.

Georgetta

I've included jQuery in my main JavaScript file with Bower and at the end of that file I initialise all my functions. – Transudate

Are you running from the dist version of your project? I'd check that if you're minifying bower includes that it's actually being added into your minified js. – Georgetta

Yes. Both jQuery and slick are being included in the minified file. jQuery is on top. – Transudate

Answer 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.

Gullah

Answer 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.

Unconcerned

Answer 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);
}

Baffle

Answer 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>

Sieracki

Answer 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.

Atmometer

Answer 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>

Bobbe

Answer 13

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

Paralogism

Answer 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>

Dareece

Answer 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

Josejosee

Answer 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>

Doralynn

Answer 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

Jemie

Answer 18

Make sure that you link slick.min.js file before the jQuery slick function and JQuery slick function appears after slick.min.js file.

Tallahassee

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center. – Impale

Answer 19

I had same problem. I was using slick in one of my subpages. However I was not using slick on my home page. However the jquery cdn and main.js file was being loaded on home page for different functions. Since slick function was on main.js it was being loaded without slick cdn.I added slick.js on home page before main. js even though I was not using it for home page and the the error vanished.

Tetravalent

Answer 20

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,
});

Mouldy

Answer 21

For me, the problem resolves after I changed:

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

to

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

Alcoran

removing type='text/javascript' should have no effect, you probably did something else too – Oversew

The suggestion is no relevant, have no effect in the syntax. – Expressive