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

슬라이드 이펙트 02. 좌로 움직이기

javascript를 이용하여 슬라이드 이펙트를 만들었습니다. 열심히 공부하세요!

---

슬라이드 이펙트 02

원본 소스 보기

자바스크립트

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

GSAP

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

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

    gsap.to(".slider__inner",{
        duration : 0.6,
        x : -800 * currentIndex,
    });

}, 2000);

JQuery

let currentIndex = 0;
setInterval(() => {
    currentIndex = (currentIndex +1) % $(".slider").length;
    // sliderInner.style.transition = "all 0.6s"
    // $(".slider__inner").css(
    //     "transform", "translateX("+ -800 * currentIndex +"px)"
    // );
    $(".slider__inner").css("position", "relative");
    $(".slider__inner").animate({left : -800 * currentIndex},600)
}, 2000);