슬라이드 이펙트

소스보기

JAVASCRIPT

Jquery

GASP

javascript


javascript

// 선택자
    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);    // 첫번째 이미지를 복사

//javascript
// 복사한 이미지를 마지막에 붙여넣기
    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)

Jquery


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

GASP


gsap

// 선택자
    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);    // 첫번째 이미지를 복사
    
//gasp
    // 복사한 이미지 마지막에 붙여넣기
    sliderInner.appendChild(sliderClone);
    function sliderEffect (){
        currentIndex++;
    
        gsap.to(sliderInner, {
            x: -sliderWidth * currentIndex,
            druation: 0.6,
            ease: "power2.out"
        });

        if(currentIndex === sliderCount){
            setTimeout(() => {
                gsap.set(sliderInner, {x:0});           // css 셋팅가능.
                currentIndex = 0
            }, 700);
        }
    }
    setInterval(sliderEffect, sliderInterval);