슬라이드 이펙트

소스 보기

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

// 선택자
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++;
    
    gsap.to(sliderInner, {
        x: -sliderWidth * currentIndex,
        druration: 0.6,
        ease: "power2.out"
    })
    if(currentIndex == sliderCount){
        setTimeout(() => {
            gsap.set(sliderInner, {x: 0})
            currentIndex = 0;
        }, 700);
        
    }
}
setInterval(sliderEffect, sliderInterval);

// 선택자
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);    //첫번째 이미지를 복사
    
// 복사한 이미지를 마지막에 붙여넣기
$(".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);