[Slide Effect] 슬라이드 이펙트 02 - 좌로 움직이기

슬라이드 이펙트 02

이번 시간에는 그 동안 배웠던 JavaScript를 이용하여 슬라이드 이펙트를 만들어보도록 하겠습니다. 2초마다 다음 사진으로 슬라이드 되는 효과이며, JS 코드와 GSAP, jQuery 코드 세 가지를 보여드리겠습니다. HTML, CSS 코드는 원본 소스 보기 버튼을 눌러 확인해주세요.

자, 그럼 시작해볼까요?

---

JS 코드

슬라이드 이펙트 02의 JS 소스와 부연 설명(주석 처리됨)이다.

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)";          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 + 1) % sliderCount;      //123401234...
            
    // if(currentIndex < 5) {
    //     currentIndex++;
    // } else {
    //     currentIndex = 0;
    // }

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

    console.log(currentIndex);

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

JS 코드 : 간략화

<script>
    const sliderInner = document.querySelector(".slider__inner");   // 움직이는 영역
    const slider = document.querySelectorAll(".slider");            // 이미지
    let currentIndex = 0;   // 현재 이미지

    sliderInner.style.transition = "all 0.6s";  // 0.6초씩 변화주기
    setInterval(() => {
        currentIndex = (currentIndex + 1) % slider.length;

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

GSAP 코드

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.0/gsap.min.js"></script>

<script>
    const slider = document.querySelectorAll('.slider'); // 이미지
    
    let currentIndex = 0;
    //let sliderCount = slider.length;
    
    setInterval(() => {
        currentIndex = (currentIndex + 1) % ".slider".length;
        // to 선택자 document.write 안써도 인식 가능
        // 밑에와 같은 구조로 써줄 것
        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(() => {
        // $ = document.querySelector 간략화된 표현
        currentIndex = (currentIndex + 1) % $(".slider").length;

        // $(".slider__inner").css(
        //     "transform", "translateX("+ -800 * currentIndex + "px)"
        // );

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

    }, 2000);
</script>

원본(HTML/JS) 소스 보기

CSS 소스 보기