슬라이드 이펙트

소스 보기

Javascript

gsap

jquery


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,
            duratin: 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);