sliderEffect02

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

이미지가 좌로 움직이는 유형입니다. 애니메이션 효과를 넣었습니다.

원본 소스 보기

원본 사이트

---

Javascript

 

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; 

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

jQuery

 

let currentIndex = 0;

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

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

GSAP

 

const slider = document.querySelectorAll(".slider");
let currentIndex = 0;

setInterval(() => {
    currentIndex = (currentIndex + 1) % slider.length;     //괄호에 슬라이더 넣는거 외에 위에 방식으로 선택자를 만들어서 siler로만 써도 됨.

    gsap.to(".slider__inner", {
        duration : 0.6, //안적어도 기본값으로 적용됨.
        x : - 800 * currentIndex,
    });
}, 2000);]