슬라이드 이펙트

소스 보기

Javascript

jquery

CSS


sliderInner.style.transition = "all 0.6s";

    setInterval(() => {
        currentIndex = (currentIndex + 1) % sliderCount;
        sliderInner.style.transform = "translateX("+ -800 * currentIndex + "px)";

    }, sliderInterval);


setInterval(() => {
    currentIndex = (currentIndex + 1) % sliderCount;
    gsap.to(sliderInner, {
        x: -800 * currentIndex,
        duration: 1,
        ease: "power4.out"
    })
    }, sliderInterval);


setInterval(() => {
    currentIndex = (currentIndex + 1) % sliderCount;
    
    $(".slider__inner").css("position", "relative");
    $(".slider__inner").animate({left: -800 * currentIndex}, 600, "easeOutElastic");   //0.6초동안 움직임


}, sliderInterval)