Slider Effect03- 연속적으로 움직이기

// slider03 
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 sliderWidth = sliderImg.offsetWidth; //이미지 가로 값
let sliderClone = sliderInner.firstElementChild.cloneNode(true); //첫번째 이미지 복사
sliderInner.appendChild(sliderClone); //첫번째 이미지를 마지막에 넣어줌

function sliderEffect(){
	currentIndex++;
	sliderInner.style.transition = "all 0.3s"; //애니메이션 실행 시간이 0.3초
	//이미지의 가로값 * 이미지 움직이는 순서
	sliderInner.style.transform = "translateX(-"+ sliderWidth * currentIndex +"px)";

	//마지막 사진에 갔을 때
    if(currentIndex == sliderCount){
    	setTimeout(() => {
        sliderInner.style.transition = "0s"; //시간 초기화
        sliderInner.style.transform = "translateX(0px)" //움직임 초기화
        }, 300);

		currentIndex = 0;
    }
 }
 setInterval(sliderEffect, 2000);

 

setInterval() - Web APIs | MDN

슬라이드 이펙트