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.

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.