Uncaught TypeError: $(...).slick is not a function, Slick Carousel on local machine-CodePudding

I have followed all the tutorials I could find but I can't get it to display a simple carousel. The console says

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

    <html>
    <head>
        <title>T_T</title>

        <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/[email protected]/slick/slick.css"/>
    </head>
    <body>

        <div >
            <div>Content 1</div>
            <div>Content 2</div>
        </div>


        <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj 3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
        <script type="text/javascript" src="//cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js"></script>

        <script type="text/javascript">
        $(document).ready(function(){
            $('.testing').slick({
            slidesToShow: 1,
            slidesToScroll: 1,
            autoplay: true,
            autoplaySpeed: 2000,
            });
        });
        </script>
    </body>
</html>

Can someone tell me what am I missing?

It seems to work just fine in the code snippet, but when I launch it locally on my computer it doesn't work :(

CodePudding user response：

The reason is that the src for the carousel script is "looking" on your local machine (or may not know where to "look") since the URL Protocol (http/s:) is not defined.

//cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js

Add the https: to the start of the URL.

https://cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js