Slider Effect - 좌로 움직이기 효과

setInterval(() => {
         console.log(currentIndex);
         // currentIndex = (currentIndex + 1) % 5;

         // if(currentIndex < silderCount) {      //if문으로 currentIndex값 설정 결괏값 0,1,2,3,4
         //     currentIndex++;
         // } else {
         //     currentIndex = 0;
         // }
         
		 //삼항연산자로 currentIndex값 설정 결괏값 0,1,2,3,4
         (currentIndex < sliderCount - 1) ? currentIndex++ : currentIndex = 0;    
         

         // sliderInner.style.left = "0px"        //800 * 0			
         // sliderInner.style.left = "-800px"     //800 * 1
         // sliderInner.style.left = "-1600px"    //800 * 2   
         // sliderInner.style.left = "-2400px"    //800 * 3
         // sliderInner.style.left = "-3200px"    //800 * 4			//이미지 움직임 5줄로 표현하는 방법

         //Javascript 애니메이션
         // sliderInner.style.left = -800 * currentIndex + "px";  //이미지 움직임 한줄 표현: -800 * currentIndex  (0,1,2,3,4)를 left값 설정
         // sliderInner.style.transition = "all 0.6s ease";       // sliderInner에 transition효과 설정

         //#GSAP 애니메이션
         gsap.to(sliderInner, {       //GSAP을 사용하여 애니메이션 효과 사용
             duration: 0.4,               
             eft: -800 * currentIndex,   //-800 * currentIndex (0,1,2,3,4)를 left값 설정
             // ease: "elastic.out(1, 0.3)"
             ease: "expo.out"
         });
}, 3000)

좌로 움직이기 효과사이트 바로가기

슬라이드 이펙트2