Slider Effect - 좌로 움직이기

 

설명

1번 사진 -> 2번 사진 -> 3번 사진 -> 4번 사진 -> 5번 사진 -> 다시 1번 사진 반복이 됩니다.

 

setInterval()

설명 : 기본 동작이 일정한 시간과 간격으로 반복적으로 일어납니다.

사용 방법

var SETINTERVAL_NAME = setInterval(FUNCTION, TIME);

실행중인 루프 종료 방법

clearInterval(SETINTERVAL_NAME);

//slider02
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 sliderCount = slider.length;
let currentIndex = 0;       //첫 번째 이미지(현재 보이는 이미지)

setInterval(() => {

	//0 1 2 3 4 0 1 2 3 4 반복
    (currentIndex < sliderCount - 1) ? currentIndex++ : currentIndex = 0;

	//GSAP 애니메이션
	gsap.to(sliderInner, {
	duration: 0.4, 
	left: -800 * currentIndex,
	ease: "expo.out"
	});
            
}, 2000)