slick slider is not working, the images are getting load one below the other

I am trying to add the slick slider to my website, but for some reason, it's not working
I have referred to this to get slider work: I can't get my Slick slider to work at all but still not working

The images on the page, are getting load one below the other

Also, it's weird when I try to run this code in Codepen, its working fine but not on VS Code

can someone tell me what's the reason or something I am missing?

CODE SNIPPET

body{
    margin: 0;
    padding: 0;
    font-family: Arial, Helvetica, sans-serif;
    letter-spacing: 1px;
}

p{
    margin: 0;
    padding: 0;
}

ul{
    margin: 0;
    padding: 0;
    list-style: none;
}

a {
    text-decoration: none;
}

h2,
h3,
a {
    color: #34495e;
}



/* header section */
.header-section{
    margin: 0 auto;
    text-align: center;
}

li {
    display: block;
    float: left;  
    position: relative;    
}
  
li {
    padding: 1rem;
    position: relative;
}

ul li ul {
    min-width: 7rem;
    position: absolute;
    left: 0;
    display: none;
}

ul li:hover > ul,
ul li ul:hover {
    visibility: visible;
    opacity: 1;
    display: block;
}

.demo-text, .header-icon{
    padding: 1rem;
}

.demo-text{
    color: red;
    font-weight: bold;
}

/* media query */

@media (min-width: 769px) {
    .header-section{
        display: flex;
        padding: 10px 15px;
        justify-content: space-around;
    }
    
    .nav-links, .nav-links ul, .header-icon{
        display: flex;
    }
    
    .nav-links ul li{
        padding: 0 15px;
    }
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <!-- external css links -->
    <link rel="stylesheet" href="css/style.css">

    <!-- slick cdn for sliders -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.css" rel="stylesheet" />
    <link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.css" rel="stylesheet" />
</head>
<body>
    <!-- header section starts -->
    <header class="header-section">
       
            <div class="demo-text">
                <p>DEMO</p>
            </div>

            <nav role="navigation">
                <ul>
                  <li><a href="#">HOME</a>
                    <ul class="dropdown">
                        <li><a href="#">HOME- 1</a></li>
                        <li><a href="#">HOME- 1</a></li>
                        <li><a href="#">HOME- 1</a></li>
                        <li><a href="#">HOME- 1</a></li>
                        <li><a href="#">HOME- 1</a></li>
                        <li><a href="#">HOME- 1</a></li>
                        <li><a href="#">HOME- 1</a></li>
                        <li><a href="#">HOME- 1</a></li>
                        <li><a href="#">HOME- 1</a></li>
                        <li><a href="#">HOME- 1</a></li>
                      </ul>
                  </li>
                  <li><a href="#">HEADERS</a></li>
                  <li><a href="#">SLIDERS</a></li>
                  <li><a href="#">PAGES</a></li>
                  <li><a href="#">BLOG</a></li>
                  <li><a href="#">SHOP</a></li>
                  <li><a href="#">ELEMENTS</a></li>
                </ul>
              </nav>

            <div class="header-icon">
                <div class="cart">
                    CART
                </div>
                <div class="search-icon">
                    ICON
                </div>                    
            </div>
    
    </header>  

    <!-- main section ends -->
    <main>
        <div class="slider">
            <div>
                <img src="http://kenwheeler.github.io/slick/img/fonz1.png" />
            </div>
            <div>
                <img src="http://kenwheeler.github.io/slick/img/fonz2.png" />
            </div>
            <div>
                <img src="http://kenwheeler.github.io/slick/img/fonz3.png" />
            </div>
            <div>
                <img src="http://kenwheeler.github.io/slick/img/fonz1.png" />
            </div>
            <div>
                <img src="http://kenwheeler.github.io/slick/img/fonz2.png" />
            </div>
            <div>
                <img src="http://kenwheeler.github.io/slick/img/fonz3.png" />
            </div>
        </div>
    </main>
    <!-- main section ends -->

    <!-- footer section ends -->
    <footer>

    </footer>
    <!-- footer section ends -->


    <!-- slick slider carousel -->
    <script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
   


    <script>
       $('.fade').slick({
          dots: true,
          infinite: true,
          speed: 700,
          autoplay:true,
          autoplaySpeed: 2000,
          arrows:false,
          slidesToShow: 1,
          slidesToScroll: 1
       });
    </script>
    </script>
</body>
</html>

How many English words
do you know?
Test your English vocabulary size, and measure
how many words do you know
Online Test
Powered by Examplum