SliderEffect - 02

스크립트를 이용한 슬라이드 효과 만들기 02

이미지가 좌로 움직이는 이미지 효과를 만들 수 있습니다. 또한 JS, GSAP, jQuery를 사용하여 이미지에 애니메이션을 줄 수 있습니다.

원본 소스 보기

JavaScript

const sliderWrap = document.querySelector(".slider__wrap");     
const sliderImg = document.querySelector(".slider__img");       //보여지는 영역
const sliderInner = document.querySelector(".slider__inner");   //움직이는 영역
const slider = document.querySelectorAll(".slider");            //이미지

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

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

setInterval(() => {

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

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

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

}, 2000);

GSAP

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.0/gsap.min.js"></script>
<script>
    let currentIndex = 0;
    const slider = document.querySelectorAll(".slider");

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

        gsap.to(".slider__inner", {
            // duration : 0.6,  기본값이 존재
            x : - 800 * currentIndex
        });
    }, 2000);
</script>

jQuery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
    let currentIndex = 0;   
        
    setInterval(() => {
        currentIndex = (currentIndex + 1) % $(".slider").length;


        $(".slider__inner").css("position", "relative");
        $(".slider__inner").animate({ left : -800 * currentIndex }, 600);
    }, 2000);
</script>