CODEWITHSUNDEEP
javascripthtmlcsssliderslick.js
Vedo
Vedo

Reputation: 643

Slider for Slick.js is not showing

I followed all the steps how to do slider using slick but for some reason pictures are only stacking one on each other instead of becoming a slide HTML code:

<!--Slider-->
    <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/[email protected]/slick/slick.css"/>
<!--Main-->
    <main>

        <!--Slider-->
        <div class="container-fluid p-0">
            <div class="site-slider">
                <div class="slider-one">
                    <div>
                        <img src="assets/slide1.jpg" class="wid img-fluid" alt="Slika 1">
                    </div>
                    <div>
                        <img src="assets/slide2.jpg" class="wid img-fluid" alt="Slika 1">
                    </div>
                    <div>
                        <img src="assets/slide3.jpg" class="wid img-fluid" alt="Slika 1">
                    </div>
                </div>
            </div>
        </div>
    </main>


 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
 <script type="text/javascript" src="//cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js"></script>
    <script src="js/main.js"></script>

This is my JS file:

$('.slider-one').slick({
    autoplay:true,
    autoplaySpeed:3000,
    dots:true
});

I have been trying to fix this problem but to no avail. So any help would be great. Thanks in advance :D

Upvotes: 0

Views: 964

Answers (1)

Amaury Hanser
Amaury Hanser

Reputation: 3456

Using double slash without specifying a particular protocol

When you load a resource by using a double slash src="\\foo", you're not defining a protocol (http, https).
The script will load using the same protocol used to load the page itself.

If you are not using a web server, it won't work.
In your example, you can see that it's trying to load file://foo", a file on your computer.

Adding the protocol, https in your case, will ensure that you'll load the resource successfully.

Upvotes: 1

Related Questions