发表新帖
发表新帖

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

前端 未结
关注
15 1534
独厮守ぢ
独厮守ぢ 2020-12-10 00:18

Somehow I\'m unable to use slick carousel (http://kenwheeler.github.io/slick/) correctly.

I\'m getting the following error:

Uncaught TypeError: $(..
相关标签:
15条回答
  • 逝去的感伤
    2020-12-10 01:06

    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.

    0 讨论(0)
  • 南方客
    2020-12-10 01:07

    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.

    0 讨论(0)
  • 难免孤独
    2020-12-10 01:08

    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>
    0 讨论(0)
  • 执笔经年
    2020-12-10 01:10

    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.

    0 讨论(0)
  • 野趣味
    2020-12-10 01:13

    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.

    0 讨论(0)
  • 滥情空心
    2020-12-10 01:13

    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>
    0 讨论(0)
 看不清?
提交回复
热议问题