Slider show does not work out

Projects Personal Projects
1

I am doing a website tutorial and it has a slideshow functionality. I make sure that I have correct codes, but my website doesn’t display the slideshow properly.

Bildschirmfoto 2021-06-17 um 11.25.01
Bildschirmfoto 2021-06-17 um 11.25.012560×1242 339 KB

The photo slider is supposed to have two <> buttons to switch around the blog card, but as you see in the above screenshot there are no such buttons displayed. Henceforth, I cannot slide the cards back and forth.

I doubt that I have missed out something, so I appreciate it if anyone could point out what I have wrong (it doesn’t have to be a solution code, but any direction on where I could work on ). I leave my source codes for your reference below.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css"
    integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
        <link href="https://fonts.googleapis.com/css?family=Candal|Lora" rel="stylesheet">
        <link rel="stylesheet" href="style.css">
        <title>Blog</title>
    </head>

    <body>
        <header>
            <div class="logo">
                <h1 class="logo-text"><span>Awa</span>Inspires</h1>
            </div>
            <i class="fa fa-bars menu-toggle"></i>
            <ul class="nav">
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Services</a></li>
                <!-- <li><a href="#">Sign Up</a></li>
                <li><a href="#">Log In</a></li> -->
                <li>
                    <a href="#">
                        <i class="fa fa-user"></i>
                        Awa Melvine
                        <i class="fa fa-chevron-down" class="font-size: .8em;"></i>
                    </a>
                    <ul>
                        <li><a href="#">Dashboard</a></li>
                        <li><a href="#" class="logout">Logout</a></li>
                    </ul>
                </li>
            </ul>
        </header>

        <!--Page Wrapper-->
        <div class="page-wrapper">

         <div class="post-slider">
            <h1 class="slider-title">Trending Posts</h1>
            <i class="far fa-chevron-left prev"></i>
            <i class="far fa-chevron-right next"></i>

            <div class="post-wrapper">
                
                <div class="post">
                    <img src="images/girl-5957398_640.jpeg" alt="" class="slider-image">
                    <div class="post-info">
                        <h4><a href="#">Summer Night City</a></h4>
                        <i class="far fa-user">Awa Melvine</i>
                        &nbsp;
                        <i class="far fa-calendar"> Jul 20, 2021</i>
                    </div>
                </div>
                
                <div class="post">
                    <img src="images/girl-5957398_640.jpeg" alt="" class="slider-image">
                    <div class="post-info">
                        <h4><a href="#">Summer Night City</a></h4>
                        <i class="far fa-user">Awa Melvine</i>
                        &nbsp;
                        <i class="far fa-calendar"> Jul 20, 2021</i>
                    </div>
                </div>
                
                <div class="post">
                    <img src="images/girl-5957398_640.jpeg" alt="" class="slider-image">
                    <div class="post-info">
                        <h4><a href="#">Summer Night City</a></h4>
                        <i class="far fa-user">Awa Melvine</i>
                        &nbsp;
                        <i class="far fa-calendar"> Jul 20, 2021</i>
                    </div>
                </div>

            </div>

         </div>
            
        </div>

        <!-- JQuery -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        
        <!--Slick Carousel-->
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js"></script>

        <!-- Custom Script -->
        <script src="scripts.js"></script>
    </body>
</html>

JS

$(document).ready(function(){
    $('.menu-toggle').on('click', function(){
      $('.nav').toggleClass('showing');
      $('.nav ul').toggleClass('showing');
    });

    $('.post-wrapper').slick({
      slidesToShow: 3,
      slidesToScroll: 1,
      autoplay: true,
      autoplaySpeed: 2000,
      nextArrow: $('.next'),
      prevArrow: $('.prev'),
      responsive: [
        {
          breakpoint: 1024,
          settings: {
            slidesToShow: 3,
            slidesToScroll: 3,
            infinite: true,
            dots: true
          }
        },
        {
          breakpoint: 600,
          settings: {
            slidesToShow: 2,
            slidesToScroll: 2
          }
        },
        {
          breakpoint: 480,
          settings: {
            slidesToShow: 1,
            slidesToScroll: 1
          }
        }
      ]
    });

});

CSS

*{
    box-sizing: border-box;
}

html,
body{
    padding: 0px;
    margin: 0px;
    background: #f6f6f6;
    font-family: 'Lora', serif;
}

h1,
h2,
h3,
h4,
h5,
h6{
    font-family: 'Candal', serif;
    color: #444;
}

a {
    text-decoration: none;
    color: inherit;
}

/* Navbar */

header{
    background: #008489;
    height: 66px;
}

header * {
    color: white;
}

header .logo{
    float: left;
    height: inherit;
    margin-left: 2em;
    
}

header .logo-text{
    margin: 9px;
    font-family: 'Candal', serif;
}

header .logo-text span{
    color: #29ccd2;
}

header ul{
    float: right;
    margin: 0px;
    padding: 0px;
    list-style: none;
}

header ul li{
    float: left;
    position: relative;
}

header ul li ul{
    position: absolute;
    top: 66px;
    right: 0px;
    width: 180px;
    display: none;
    z-index: 88888;
}

header ul li:hover ul{
    display: block;
}

header ul li ul li{
    width: 100%;
}

header ul li ul li a{
    padding: 10px;
    background-color: white;
    color: black;
}

header ul li ul li a.logout{
    color: red;
}

header ul li ul li a:hover{
    background: #d5d6d6;
}

header ul li a{
    display: block;
    padding: 21px;
    font-size: 1.1em;
    text-decoration: none;
}

header ul li a:hover{
    background: #006669;
    transition: 0.5s;
}

header .menu-toggle{
    display: none;
}

.page-wrapper{
    min-height: 100%;
}

.page-wrapper a:hover{
    color: #006669;
}

/* POST SLIDER */
.post-slider{
    position: relative;
}

.post-slider .slider-title{
    text-align: center;
    margin: 30px auto;
}

.post-slider .next{
    position: absolute;
    top: 50%;
    left: 30px;
    font-size: 2em;
    color: #006669;
    cursor: pointer;
}

.post-slider .prev{
    position: absolute;
    top: 50%;
    left: 30px;
    font-size: 2em;
    color: #006669;
    cursor: pointer;
}

.post-slider .post-wrapper{
    width: 84%;
    height: 350px;
    margin: 0px auto;
    overflow: hidden;
    padding: 10px 0px 10px 0px;
}

.post-slider .post-wrapper .post{
    width: 300px;
    height: 350px;
    margin: 0px 10px;
    display: inline-block;
    background: white;
    border-radius: 5px;
    box-shadow: 1rem 1rem 1rem -1rem #a0a0a033;
}

.post-slider .post-wrapper .post .post-info{
    height: 130px;
    padding: 0px 5px;
}

.post-slider .post-wrapper .post .slider-image{
    width: 100%;
    height: 200px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

/* MEDIA QUERIES */
@media only screen and (max-width: 770px){
    header {
        position: relative;
    }
    header ul{
        width: 100%;
        background: #0E94A0;
        max-height: 0px;
        overflow: hidden;
    }
    .showing{
        max-height: 100em;
    }
    header ul li{
        width: 100%;
    }

    header ul li ul{
        position: static;
        width: 100%;
        display: block;
    }

    header ul li ul li a{
        padding: 10px;
        background-color:#0E94A0;
        color: white;
        padding-left: 50px;
    }

    header ul li ul li a:hover{
        background: #006669;
    }
    
    header ul li ul li a.logout{
        color: red;
    }

    header .menu-toggle{
        display: block;
        position: absolute;
        right: 20px;
        top: 20px;
        font-size: 1.9rem;
    }

    header .logo{
        margin-left: .8em;
    }
}