JSFiddle - React, Tailwind, and code Playground

by ZooeyLai

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.css">
    <div class="wrap">
        <div class="container">
            <div class="slide-wrap">
                <!-- Slides -->
                <div class="slide-slide">
                    <img class="slide-img" src="https://picsum.photos/id/237/1200/500" alt="">
                </div>
                <div class="slide-slide">
                    <img class="slide-img" src="https://picsum.photos/id/168/1200/500" alt="">
                </div>
                <div class="slide-slide">
                    <img class="slide-img" src="https://picsum.photos/id/177/1200/500" alt="">
                </div>
                <div class="slide-slide">
                    <img class="slide-img" src="https://picsum.photos/id/227/1200/500" alt="">
                </div>
                <div class="slide-slide">
                    <img class="slide-img" src="https://picsum.photos/id/239/1200/500" alt="">
                </div>
            </div>            
        </div>
    </div>

CSS

*{
        box-sizing: border-box;
        font-size: 1rem;
        line-height: 1.5;
        padding: 0;
        margin: 0;
    }
    body{
        background:var(--gray800);
        font-family: Lato, sans-serif;
    }
    .container{
        width: 60%;
        margin: 0 auto;
    }
    .slide-img{
        /* display: none; */
        max-width: 100%;
        width: 100%;
        aspect-ratio: 16 / 9;
        object-fit: cover;
    }

JavaScript

$('.slide-wrap').slick({
        dots: true,
        infinite: true,
        speed: 300,
        fade: true, 
        slidesToShow: 1,
        autoplay: 2000,
    });