Javascript Slider Effect02

슬라이드 이펙트 - 좌로 움직이기

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
소스 보기
Javascript
GSAP
JQuery 
const sliderWrap = document.querySelector(".slider__wrap");
const sliderImg = document.querySelector(".slider__img");       //보여지는 영역
const sliderInner = document.querySelector(".slider__inner");   //움직이는 영역
const slider = document.querySelector(".slider");               //이미지


let currentIndex = 0;   //현재 이미지
let sliderCount = slider.length;    //이미지 갯수

sliderInner.style.transition = "all 0.6s";
//sliderInner.style.transform += "translateX(0px)";         -800 * 0
//sliderInner.style.transform += "translateX(-800px)";      -800 * 1
//sliderInner.style.transform += "translateX(-1600px)";     -800 * 2
//sliderInner.style.transform += "translateX(-2400px)";     -800 * 3
//sliderInner.style.transform += "translateX(-3200px)";     -800 * 4

setInterval(() => {
    // currentIndex++;
    currentIndex = (currentIndex + 1) % sliderCount; //1 2 3 4 0 1 2 3 4
    
    // if(currentIndex<4) {
    //     currentIndex++;
    // }else{
    //     currentIndex=0;
    // }

    // (currentIndex < 4) ? currentIndex++ : currentIndex=0;

    sliderInner.style.transform = "translateX("+ -800 * currentIndex + "px)";
}, 2000);

const slider = document.querySelectorAll(".slider");
let currentIndex = 0;

setInterval(() => {
    currentIndex = (currentIndex + 1) % slider.length;

    gsap.to(".slider__inner",{
        duration : 0.6,
        x : -800 * currentIndex,
    });

}, 2000);

let currentIndex = 0;
setInterval(() => {
    currentIndex = (currentIndex +1) % $(".slider").length;
    // sliderInner.style.transition = "all 0.6s"
    // $(".slider__inner").css(
    //     "transform", "translateX("+ -800 * currentIndex +"px)"
    // );
    $(".slider__inner").css("position", "relative");
    $(".slider__inner").animate({left : -800 * currentIndex},600)
}, 2000);