JavaScript Mouse Effect01

<main>
    <section>
        <div class="slider__wrap">
            <div class="slider__img">
                <div class="slider"><img src="img/arch01.jpg" alt="이미지1"<>/div>
                <div class="slider"><img src="img/arch02.jpg" alt="이미지2"<>/div>
                <div class="slider"><img src="img/arch03.jpg" alt="이미지3"<>/div>
                <div class="slider"><img src="img/arch04.jpg" alt="이미지4"<>/div>
                <div class="slider"><img src="img/arch05.jpg" alt="이미지5"<>/div>
            </div>
        </div>
    </section>
</main>

                                        .slider__wrap {
                                            display: flex;
                                            align-items: center;
                                            justify-content: center;
                                            height: 100vh;
                                        }
                                        .slider__img {
                                            position: relative;
                                            width: 800px;
                                            height: 480px;
                                        }
                                        .slider__img .slider {
                                            position: absolute;
                                            left: 0;
                                            top: 0;
                                        }
                                        .slider::before {
                                            position: absolute;
                                            left: 5px;
                                            top: 5px;
                                            background: rgba(0, 0, 0, 0.4);
                                            color: #fff;
                                            padding: 5px 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;}   
                                    

                                        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
                                    
                                            slider[currentIndex].style.opacity = "0";   //첫번째 이미지를 안 보이게
                                            slider[nextIndex].style.opacity = "1";      //두번째 이미지를 안 보이게
                                    
                                            //각 슬라이더마다 효과 주기
                                            slider.toEach(slider => {
                                                slider.style.transition = "all 0.3s";
                                            })
                                    
                                            currentIndex = nextIndex;   //nextIndex에 currentIndex를 대입
                                        }, '2000');