Slider Effect02- 좌로 움직이기

setInterval()을 이용한 이미지 슬라이드 - 좌로 움직이기

 

//설명. 참고사항.

    let currentIndex = -1;   //첫 번째 이미지 (현재 보이는 이미지), -1로 주면 트랜지션이 잘 된다.
    let sliderCount = slider.length;    //이미지 갯수

    setInterval(()=>{         
        console.log(currentIndex); 
        currentIndex = (currentIndex+1)%5;       //currentIndex의 데이터 변경해서 01234가 나오게

        if((currentIndex<sliderCount-1)){        //currentIndex의 조건을 부여해서 if/else로 작업
            currentIndex++;
        } else {
            currentIndex = 0;                     //flase면 currentIndex가 0으로.
        }
        (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

        //javascript 애니메이션
        sliderInner.style.left = -(800 * currentIndex) + "px";  // 다섯번 적는걸 한번에 줄임. 스타일 속성을 바로 추가해서 사용. 
        sliderInner.style.transition = "all 0.6s ease";         //트랜지션 효과를 사용.

        //GSAP 애니메이션            //GASP 라이브러리를 사용해서 간편하게 작성.
        gsap.to(sliderInner, {
            duration: 0.4,           //작동 시간
            left: -800 * currentIndex, //움직일 위치와 방향
            ease: "expo.out"         //ease 효과
        });

    },2000);

setInterval()참고

setInterval() - Web APIs | MDN

이번에는 좌로 움직이는 이미지 슬라이드 입니다. setInterval() 함수의 처음 조건식은 사진의 갯수가 같으니 동일하다고 보면 됩니다. 이번에는 사진이 움직이는 픽셀 값을 조정해서 넘겨집니다.  애니메이션의 경우 플러그인을 이용해서 좀더 쉽게 활용해보았습니다.