Slider Effect 02 - 좌로 움직이기

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

    setInterval(()=>{
        // currentIndex = (currentIndex + 1) % 5
        console.log(currentIndex);
            
        (currentIndex < sliderCount-1) ? currentIndex++ : currentIndex = 0;

        // Javascript 애니메이션
        // sliderInner.style.left = -800 * currentIndex +'px'
        // sliderInner.style.transition = "all 0.6s ease"

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

전체 사이트 보기