JavaScript Slider Effect04

이미지 슬라이드 - 위로 움직이기(연속적)

//slider04
    <section id="slideType03">
        <div class="slider__wrap">
            <div class="slider__img">
                <div class="slider__inner">
                    <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>
        </div>
    </section>

/* slider */
    .slider__wrap {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100vh;
    }
    .slider__img {               /* 화면 보이는 구간 */
        width: 800px;
        height: 480px;
        overflow: hidden;
    }
    .slider__inner {            /* 이미지 움직이는 영역 */
        display: flex;
        flex-direction: column;
        width: 480px;          
        height: 2880px;         /* 이미지 총 길이 */
        transform: translateY(0);
    }
    .slider {
        width: 800px;
        position: relative;
    }
    .slider::before {
        position: absolute;
        left: 5px;
        top: 5px;
        background: rgba(0,0,0,0.4);
        color: #fff;
        padding: 3px 10px 5px;
    }
    .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(6)::before {content: '이미지1';}

//slider04
    const sliderWrap = document.querySelector(".slider__wrap");
    const sliderImg = document.querySelector(".slider__img");        //이미지 보이는 영역
    const sliderInner = document.querySelector(".slider__inner");    //이미지 움직이는 영역
    const slider = document.querySelectorAll(".slider");             //5개의 이미지 저장
    
    let currentIndex = 0;                                            //첫 번째 이미지(현재 보이는 이미지)
    let sliderCount = slider.length;                                 //이미지 갯수
    let sliderHeight = sliderImg.offsetHeight                        //이미지 세로 값
    let sliderClone = sliderInner.firstElementChild.cloneNode(true); //첫번째 이미지 복사
    sliderInner.appendChild(sliderClone);                            //첫 번째 이미지를 마지막에 추가

    function sliderEffect(){
        currentIndex++;
        sliderInner.style.transition = "all 0.3s";
        sliderInner.style.transform = "translateY(-"+ sliderHeight * currentIndex +"px)"

        //마지막 사진에 갔을 때
        if(currentIndex == sliderCount){
            setTimeout(() => {
                //초기화
                sliderInner.style.transition = "0s";
                sliderInner.style.transform = "translateY(0px)"
            },300)
            currentIndex = 0;
        }
    }
    setInterval(sliderEffect, 2000);