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

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.

I suggest putting your cove alive on JSFiddle or similar site. — Joy, Aug 03 '15 at 14:41
If you are trying to manage slick through npm, note: npm install slick-carousel. — jomofrodo, Jun 23 '16 at 20:48

score 48 · Accepted Answer · answered Aug 26 '15 at 23:00

48

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.

answered Aug 26 '15 at 23:00

Sanderfish

1,200
1
10
14

2

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. – Elijha Sep 10 '15 at 03:55
I have same issue but can't found other jquery version, – Thoman Nov 05 '15 at 17:32
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. – Sanderfish Nov 05 '15 at 20:24
1

omg! when I read your reply I thought that is impossible, but when I checked scritpts... tyvm mate! – godblessstrawberry Aug 19 '17 at 22:24
Thanks, for this. Did the exact same thing. Had a call in a CDN js file that added jquery if it wasn't added previously on the page. Moved the down below where I was calling jQuery and everything is back to normal. Thanks! – Dtrav Jun 25 '20 at 20:03

alexfrize · Answer 2 · 2016-10-13T22:49:45.003

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/

Thanks. This was a solution for me. – Denis Jul 03 '19 at 19:29 — Denis, Jul 03 '19 at 19:29

score 7 · Answer 3 · answered Aug 03 '15 at 15:25

7

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.

answered Aug 03 '15 at 15:25

Joy

8,809
7
38
84

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: but the error is still there. – Sanderfish Aug 03 '15 at 16:02
@Sandrino Check the `Source` panel on Chrome DevTool. Check whether the two JS files are loaded correctly. – Joy Aug 03 '15 at 16:05
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? – Sanderfish Aug 03 '15 at 16:34
If you type in `$(...).slick` on the console and it reports the error, it means the file is not loaded correctly. – Joy Aug 03 '15 at 16:46
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. – Sanderfish Aug 03 '15 at 17:16
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? – Sanderfish Aug 03 '15 at 17:36
It Works for me also – shiva Dec 03 '18 at 12:25

Drew Adams · Answer 4 · 2016-12-08T17:44:58.477

7

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

edited Dec 08 '16 at 17:44

answered Oct 16 '16 at 09:09

Drew Adams

146
2
9

score 4 · Answer 5 · answered Aug 03 '15 at 14:44

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.

score 4 · Answer 6 · answered Oct 28 '17 at 17:44

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.

score 3 · Answer 7 · answered Aug 03 '15 at 14:45

3

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.

answered Aug 03 '15 at 14:45

Daniel Waghorn

2,909
2
17
32

I've included jQuery in my main JavaScript file with Bower and at the end of that file I initialise all my functions. – Sanderfish Aug 03 '15 at 14:57
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. – Daniel Waghorn Aug 03 '15 at 14:59
Yes. Both jQuery and slick are being included in the minified file. jQuery is on top. – Sanderfish Aug 03 '15 at 15:08

score 3 · Answer 8 · answered Dec 06 '18 at 12:00

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.

score 1 · Answer 9 · answered May 15 '18 at 16:28

1

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.

answered May 15 '18 at 16:28

s15199d

6,187
8
38
62

sweet-2 · Answer 10 · 2018-06-06T08:11:13.243

1

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>

edited Jun 06 '18 at 08:11

answered Jun 06 '18 at 08:05

sweet-2

127
1
4

score 1 · Answer 11 · answered Mar 11 '19 at 20:02

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

FlyingKitlets · Answer 12 · 2019-04-23T10:53:36.557

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>

score 0 · Answer 13 · answered Dec 15 '19 at 05:27

0

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

answered Dec 15 '19 at 05:27

Anthony

35
3

score 0 · Answer 14 · answered Dec 06 '20 at 19:38

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

score 0 · Answer 15 · edited Mar 01 '21 at 10:22

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>

Please feel free to [edit] if this is not what you meant... – Suraj Rao Mar 01 '21 at 10:22 — Suraj Rao, Mar 01 '21 at 10:22

score -2 · Answer 16 · answered Aug 24 '17 at 08:13

-2

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.

answered Aug 24 '17 at 08:13

Frederick Chan

47
3

6

removing `type='text/javascript'` should have no effect, you probably did something else too – stephenmurdoch Sep 25 '17 at 14:18

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

16 Answers16

Linked