슬라이드 이펙트

소스 보기

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 = 2000;                                          //이미지 변경 간격 시간
let sliderWidth = slider[0].offsetWidth;                            //이미지 가로 값
let sliderClone = sliderInner.firstElementChild.cloneNode(true);    //첫번째 이미지를 복사

// 복사한 이미지를 마지막에 붙여넣기
sliderInner.appendChild(sliderClone);

function sliderEffect (){
    currentIndex++;

    sliderInner.style.transition = "all 0.6s ease-in";
    sliderInner.style.transform = "translateX(-"+ sliderWidth * currentIndex +"px)";

    // 마지막 이미지가 위치 했을 때
    if(currentIndex == sliderCount){
        setTimeout(() => {
            sliderInner.style.transition = "0s";
            sliderInner.style.transform = "translateX(0px)";
        }, 700)
        currentIndex = 0;
    }
}
setInterval(sliderEffect, sliderInterval);

// 복사한 이미지를 마지막에 붙여넣기
sliderInner.appendChild(sliderClone);

function sliderEffect(){
    currentIndex++;

    gsap.to(sliderInner, {
       x: -sliderWidth * currentIndex,
       duration: 0.6,
       ease: "power2.out"
    });

    if(currentIndex == sliderCount){
        setTimeout(() => {
            gsap.set(sliderInner, {x: 0});
            currentIndex = 0;
        }, 700);
    }
}
setInterval(sliderEffect, sliderInterval);

// 복사한 이미지를 마지막에 붙여넣기
$(".slider__inner").append(sliderClone);

function sliderEffect(){
    currentIndex++;

    $(".slider__inner").css({
        "transition" : "all 0.6s",
        "transform" : "translateX(-"+ sliderWidth * currentIndex +"px)"
    });

    if(currentIndex == sliderCount){
        setTimeout(() => {
            $(".slider__inner").css({
                "transition" : "0s",
                "transform" : "translateX(0px)"
            });
        }, 700);
        currentIndex = 0;
    }
}
setInterval(sliderEffect, sliderInterval);