슬라이드 이펙트 02

소스 보기

JavaScript

GSAP

Jquery

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

    sliderInner.style.transition = "all 0.6s";  // 0.6초씩 변화주기
    setInterval(() => {
        currentIndex = (currentIndex + 1) % slider.length;

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.0/gsap.min.js"></script>

<script>
    let currentIndex = 0;
    //let sliderCount = slider.length;
    setInterval(() => {
        currentIndex = (currentIndex + 1) % ".slider".length;
        //to 선택자 document.write 안써도 인식함
        //밑에와 같은 구조로 써줄 것
        gsap.to(".slider__inner", {
            //duration : 0.6,
            x : -800 * currentIndex, //객체 스타일 구조
        });
    }, 2000);
</script>

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

<script>
    let currentIndex = 0;

    setInterval(() => {
        // $ = document.querySelector 간략화된 표현
        currentIndex = (currentIndex + 1) % $(".slider").length;

        // $(".slider__inner").css(
        //     "transform", "translateX("+ -800 * currentIndex + "px)"
        // );

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

    }, 2000);
</script>