sliderEffect02

sliderEffect02 - 좌로 움직이기

두번째 슬라이드 이펙트 - 좌로 움직이기 입니다. sliderEffect01번에서 애니메이션 효과를 주어 한장씩 부드럽게 넘어가도록 만들었습니다.

---

참고

슬라이드 이펙트 02 페이지 우측하단 소스 보기를 클릭하시면 JAVASCRIPT, HTML, CSS를 확인할 수 있습니다.

원본 소스 보기 메인 페이지 보기

JAVASCRIPT

자바스크립트 코드입니다. transition 기능을 사용하여 0.6초 간격으로 애니메이션 시간을 설정하였습니다.
translateX는 x축의 방향으로 -800px(사진의 폭)만큼 2초마다 넘어가도록 하였습니다.

const sliderInner = document.querySelector(".slider__inner")    //움직이는 영역
const slider = document.querySelectorAll(".slider")             //이미지
let currentIndex = 0;                   //현재 이미지

sliderInner.style.transition = "all 0.6s";      //이미지 애니메이션 기능

setInterval(() => {
    currentIndex = (currentIndex + 1) % slider.length;      //123401234012340

    sliderInner.style.transform = "translateX(" + -800 * currentIndex + "px)";
}, 2000);

GSAP

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.0/gsap.min.js"></script>
<script>
    const slider = document.querySelectorAll(".slider");

    let currentIndex = 0;

    setInterval(() => {
        currentIndex = (currentIndex + 1) % slider.length;

        gsap.to(".slider__inner", {
            x : -800 * currentIndex
        });
    }, 2000);
</script>

JQUERY

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
    let currentIndex = 0;

    setInterval(() => {
        currentIndex = (currentIndex + 1) % $(".slider").length;

        $(".slider__inner").css("position", "relative");
        $(".slider__inner").animate({ left : -800 * currentIndex }, 600);
    }, 2000);
</script>