Slider Effect 03 - 연속적으로 움직이기

{
        const sliderWrap = document.querySelector(".slider__wrap")
        const sliderImg = document.querySelector(".slider__img")        //이미지 보이는 영역
        const sliderInner = document.querySelector(".slider__inner")    //이미지 움직이는 영역
        const slider = document.querySelectorAll(".slider")

        let currentIndex = 0;
        let sliderCount = slider.length;                     //이미지 갯수
        let sliderWidth = sliderImg.offsetWidth;            //이미지 가로값                  
        let sliderClone = sliderInner.firstElementChild.cloneNode(true);     //첫번째 자식 선택자(firstElementChild)로 첫번째 이미지 복사
        sliderInner.appendChild(sliderClone);      //첫 번째 이미지를 마지막에 넣어줌
        

        function sliderEffect(){        //sliderEffect 함수생성
            currentIndex++
            sliderInner.style.transition = "all 0.3s";  
            sliderInner.style.transform = "translateX(-"+ sliderWidth *currentIndex +"px)"  //translatex - 이미지 가로값 * 현재 보이는 이미지 + px을sliderInner.style.transformㅇ에 저장


            //마지막 사진에 갔을 때
            if(currentIndex == sliderCount){   
                setTimeout(()=>{        //함수를 한번만 실행
                //이미지 초기화
                sliderInner.style.transition = "0s";
                sliderInner.style.transform = "translateX(0px)"
                },300)                   //5~6번 갈때 애니메이션이 끊겨서 5~6번 가는 2초사이에 이미지를 뒤로 옮김
                currentIndex = 0;
            }
        }
        setInterval(sliderEffect, 2000); //sliderEffect 함수 계속실행


            // sliderInner.style.transform = "translateX(-800px)"
            // sliderInner.style.transform = "translateX(-1600px)"
            // sliderInner.style.transform = "translateX(-2400px)"
            // sliderInner.style.transform = "translateX(-3200px)"
            // sliderInner.style.transform = "translateX(-4000px)"
            // sliderInner.style.transform = "translateX(-4800px)" <를 단축 시킨게 이미지 초기화
}