sliderEffect03 - 연속적으로 움직이기

https://garenchoi.github.io/webs_class/javascript/effect/sliderEffect03.html

const sliderWrap = document.querySelector(".slider__wrap");
const sliderImg = document.querySelector(".slider__img");       //sliderImg에 클래스 slider__img(이미지 보이는 영역) 저장
const sliderInner = document.querySelector(".slider__inner");    //sliderInner에 클래스 slider__inner(이미지 움직이는 영역) 저장
const slider = document.querySelectorAll(".slider");            //slider에 클래스 slider(5개의 이미지) 저장

let currentIndex = 0;
let sliderCount = slider.length;                                    //sliderCount에 전체이미지 갯수 저장  
let sliderWidth = sliderImg.offsetWidth;                            //sliderWidth에 이미지 가로 값 저장
let sliderClone = sliderInner.firstElementChild.cloneNode(true);    //sliderClone에 첫번째 이미지 복사해서 저장
sliderInner.appendChild(sliderClone);                               //sliderClone(첫번째 이미지)을 sliderInner마지막에 넣음

function sliderEffect(){		//함수 sliderEffect 선언
    currentIndex++;				//currentIndex 1씩 증가
    sliderInner.style.transition = "all 0.3s";		//sliderInner의 스타일에 transition "all 0.3s" 추가
    sliderInner.style.transform = `translateX(-${sliderWidth * currentIndex}px)`;	//sliderInner의 스타일에 transform `translateX(-${sliderWidth * currentIndex}px)` 추가

    //마지막 사진에 갔을 때
    if(currentIndex == sliderCount){		//currentIndex와 sliderCount가 같으면
        setTimeout(() => {				//setTimeout(한번만 실행)
            //초기화
            sliderInner.style.transition = "0s";		//sliderInner의 스타일에 transition "0s" 추가
            sliderInner.style.transform = "translateX(0)";		//sliderInner의 스타일에 transform "translateX(0)" 추가
        }, 300);		//0.3초 후 실행
        currentIndex = 0;		//currentIndex를 0으로 변경
    }
}
setInterval(sliderEffect, 2000);	//setInterval사용(함수 sliderEffect를 2초마다 실행)