JavaScript Slider Effect01

//slider01
    <section id="slideType01">
        <div class="slider__wrap">
            <div class="slider__img">
                <div class="slider"><img src="img/slide06.jpg" alt="이미지1"></div>
                <div class="slider"><img src="img/slide07.jpg" alt="이미지2"></div>
                <div class="slider"><img src="img/slide08.jpg" alt="이미지3"></div>
                <div class="slider"><img src="img/slide09.jpg" alt="이미지4"></div>
                <div class="slider"><img src="img/slide10.jpg" alt="이미지5"></div>
            </div>
        </div>
    </section>

/* slider01 */
        .slider__wrap {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100vh;
        }
        .slider__img {
            position: relative;
            width: 800px;
            height: 480px;
        }
        .slider {
            position: absolute;
            left: 0;
            top: 0;
        }
        .slider::before {
            position: absolute;
            left: 5px;
            top: 5px;
            background: rgba(0,0,00.4);
            color: #fff;
            padding: 3px 10px 3px;
        }
        .slider:nth-child(1)::before {content: '이미지1';}
        .slider:nth-child(2)::before {content: '이미지2';}
        .slider:nth-child(3)::before {content: '이미지3';}
        .slider:nth-child(4)::before {content: '이미지4';}
        .slider:nth-child(5)::before {content: '이미지5';}
        .slider:nth-child(1) {z-index: 5;}
        .slider:nth-child(2) {z-index: 4;}
        .slider:nth-child(3) {z-index: 3;}
        .slider:nth-child(4) {z-index: 2;}
        .slider:nth-child(5) {z-index: 1;}
    

//slider01
    const sliderWrap = document.querySelector(".slider__wrap")
    const sliderImg = document.querySelector(".slider__img")
    const slider = document.querySelectorAll(".slider")

    let currentIndex = 0;                           //현재 보이는 이미지
    let sliderCount = slider.length;                //이미지 갯수

    setInterval(() => {      
        let nextIndex = (currentIndex + 1) % 5;     //0 1 2 3 4 0 1 2 3 4 0 1 2 3 4 반복

        slider[currentIndex].style.opacity = "0"    //첫번째 이미지를 안보이게 함
        slider[nextIndex].style.opacity = "1"       //두번째 이미지를 보이게함

        slider.forEach(slider => {
            slider.style.transition = "all 0.3s"    //각각의 이미지들에게 css효과를 줌
        })

        currentIndex = nextIndex                    //무한 반복 설정
        
    }, 2000);                                       //2초에 한번씩 실행