sliderEffect | 슬라이드 이펙트 02

source view

JAVASCRIPT

GSAP

jQeury

const sliderWrap = document.querySelector(".slider__wrap"); // 이미지를 감싸는 영역
const sliderWImg = document.querySelector(".slider__img"); // 보여지는 영역
const sliderInner = document.querySelector(".slider__inner"); // 움직이는 영역
const slider = document.querySelectorAll(".slider"); // 이미지

sliderInner.style.transition = "all 0.6s";

// sliderInner.style.transform = "translateX(0px)"; 첫 번째 이미지의 위치 | 800 * 0
// sliderInner.style.transform = "translateX(-800px)"; 두 번째 이미지의 위치 | 800 * 1
// sliderInner.style.transform = "translateX(-1600px)"; 세 번째 이미지의 위치 | 800 * 2 ... | 800 * 4

let currentIndex = 0; // 현재 이미지
let sliderCount = slider.length; // 슬라이드 이미지 전체 갯수

setInterval(() => {
    currentIndex++;

    let sliderIndex = currentIndex % sliderCount; // 가장 적절한 방법

    // if(currentIndex < 4) {
    //     currentIndex++;
    // } else {
    //     currentIndex = 0;
    // }

    // currentIndex < 4 ? currentIndex++ : (currentIndex = 0);

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

<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>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
    // const slider = $(".slider"); // 이미지

    let currentIndex = 0;

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

        $(".slider__inner").css("position", "relative");

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