슬라이드 이펙트

소스보기

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);    // 첫번쩨 이미지를 복사
    
    // gsap
    // 복사한 이미지를 마지막에 붙여넣기
    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); 
}

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