Javascript Slider Effect02

슬라이드 이펙트 - 좌로 움직이기

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
소스 보기
JAVSCRIPT
GSAP
JQUERY 
<script>
    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);
</script>

<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>
    let currentIndex = 0;

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

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