JSFiddle - React, Tailwind, and code Playground

by ZooeyLai

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <div class="wrap">
        <div class="container">
            <div class="slide-wrap">
                <!-- Slides -->
                <div class="slide-slide fade">
                    <img class="slide-img" src="https://picsum.photos/id/237/1200/500" alt="">
                </div>
                <div class="slide-slide fade">
                    <img class="slide-img" src="https://picsum.photos/id/168/1200/500" alt="">
                </div>
                <div class="slide-slide fade">
                    <img class="slide-img" src="https://picsum.photos/id/177/1200/500" alt="">
                </div>
                <div class="slide-slide fade">
                    <img class="slide-img" src="https://picsum.photos/id/227/1200/500" alt="">
                </div>
                <div class="slide-slide fade">
                    <img class="slide-img" src="https://picsum.photos/id/239/1200/500" alt="">
                </div>

                <!-- dots -->
                <div class="slide-dots">
                    <span class="dot" onclick="currentSlide(1)"></span> 
                    <span class="dot" onclick="currentSlide(2)"></span> 
                    <span class="dot" onclick="currentSlide(3)"></span> 
                    <span class="dot" onclick="currentSlide(4)"></span> 
                    <span class="dot" onclick="currentSlide(5)"></span> 
                </div>

                <!-- If we need navigation buttons -->
                <div class="slide-button-prev" onclick="plusSlides(-1)"><i class="fa-solid fa-angle-left"></i></div>
                <div class="slide-button-next" onclick="plusSlides(1)"><i class="fa-solid fa-angle-right"></i></div>

            </div>            
        </div>

    </div>

CSS

:root{
        --primary: #4338ca;
        --secondary:#2563eb;
        --secondary100: #dbeafe;
        --gray800: #1e293b;
        --white: #fff;
        --background:#e4e4e4;
        --warning100 :#ffedd5;
        --warning : #ea580c;
        --danger100 :#fee2e2;
        --danger : #dc2626;
        --success : #059669;
        --success100: #ecfdf5;
    }
    *{
        box-sizing: border-box;
        font-size: 1rem;
        line-height: 1.5;
        padding: 0;
        margin: 0;
    }
    body{
        background: #f1f5f9;
        color: var(--gray800);
        font-family: Lato, sans-serif;
    }
    ul,ol{
        list-style: none;
    }
    a{
        text-decoration: none;
    }
    .container{
        width: 70%;
        margin: 0 auto;
    }
    .slide-wrap{
        max-width: 1000px;
        margin: 0 auto;
        width: 100%;
        height: 100%; 
        display: flex;
        flex-direction: column;
        overflow: hidden;
        scroll-behavior: smooth;
        position: relative;
    }
    .slide-slide{
        display: none;
    }
    .slide-img{
        /* display: none; */
        max-width: 100%;
        width: 100%;
        aspect-ratio: 16 / 9;
        object-fit: cover;
        border-radius: 0.875rem;
    }


    .slide-button-prev,.slide-button-next{
        cursor: pointer;
        position: absolute;
        top: 50%;
        width: auto;
        padding: 0.875rem;
        color: var(--white);
        border-radius: 50%;
        transition: all 0.3s;
    }
    .slide-button-prev i,.slide-button-next i{
        font-size: 1.25rem;
        width: 20px;
        height: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .slide-button-prev{
        left: 1rem;
    }
    .slide-button-next{
        right: 1rem;
    }
    .slide-button-prev:hover,.slide-button-next:hover{
        background: rgba(0,0,0,0.6);
    }
    .slide-dots{
        display: flex;
        flex-direction: row;
    ...

JavaScript

// 顯示目前slide的索引
        let slideIndex = 1;
        showSlide(slideIndex);
        // 左右切換按鈕
        function plusSlides(n){
            showSlide(slideIndex += n);
        }

        function showSlide(n){
        //取得所有的slide及dot
        let images = document.querySelectorAll('.slide-slide');
        let dots = document.querySelectorAll('.dot');
            // 驗證索引是否超出範圍
            if (n > images.length){
                slideIndex = 1;
            }
            if(n < 1){
                slideIndex = images.length;
            }
            // 隱藏所有的slide及dot
            for(let i = 0; i < images.length; i++ ){
                images[i].style.display = 'none';
            }
            for (let i = 0; i < dots.length; i++){
                dots[i].className = dots[i].className.replace(" active", "");
            }
            //顯示目前的slide及dot
            images[slideIndex - 1].style.display = "block";
            dots[slideIndex - 1].className += " active";
        }
        // dot對應的slide-slide
        function currentSlide(n){
            showSlide(slideIndex = n) 
        }