슬라이드 이펙트

소스 보기

Javascript

gsap

jquery

// 선택자
const sliderWrap = document.querySelector(".slider__wrap"); 
const sliderImg = sliderWrap.querySelector(".slider__img");         //보여지는 영역
const sliderInner = sliderWrap.querySelector(".slider__inner");     //움직이는 영역
const slider = sliderWrap.querySelectorAll(".slider");              //개별 이미지

// 변수 설정
let currentIndex = 0;               //현재 보이는 이미지
let sliderCount = slider.length;    //이미지 갯수
let sliderInterval = 3000;          //이미지 변경 간격 시간
    
sliderInner.style.transition = "all 0.6s";

setInterval(() => {
    currentIndex = (currentIndex + 1) % sliderCount;

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

setInterval(() => {
    currentIndex = (currentIndex + 1) % sliderCount;

    gsap.to(sliderInner, {
        x:-800 * currentIndex,
        duration: 1,
        ease: "power4.out"
    })
}, sliderInterval)

setInterval(() => {
    currentIndex = (currentIndex + 1) % sliderCount;

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

}, sliderInterval)