슬라이드 이펙트

소스보기

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 = 3000;          // 이미지 변경 간격시간

    //애니메이션
    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
    
    // javascript
    sliderInner.style.transition = "all 0.6s";
    setInterval(() => {
        currentIndex = (currentIndex + 1) % sliderCount;
        sliderInner.style.transform ="translateX("+ -800 * currentIndex + "px)";

    }, sliderInterval);
}

{
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
    // 선택자
    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 = 3000;          // 이미지 변경 간격시간

    //애니메이션
    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

    // gsap
    setInterval(() => {
        currentIndex = (currentIndex + 1) % sliderCount;
        gsap.to(sliderInner, {
            x: -800 * currentIndex,
            duration: 1,
            ease: "power4.out"
        })
    }, 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 = 3000;          // 이미지 변경 간격시간

    //애니메이션
    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

    // jquery
    setInterval(() => {
        currentIndex = (currentIndex + 1) % sliderCount;
        $(".slider__inner").css("position" , "relative");
        $(".slider__inner").animate({left: -800 * currentIndex}, 600);
    }, sliderInterval);
}