자바스크립트 슬라이드 효과(4)에 대해 알아보자!

오늘은 왼쪽으로 슬라이드가 넘어가는데, 2번째 효과와 다르게 연속적으로 움직일 수 있도록 작업해보겠습니다!

자바스크립트 슬라이드 효과

슬라이드 효과 4

슬라이드 이펙트 중 이미지가 가로로, 왼쪽으로 넘어가는 효과입니다.(연속적)

 

구조

<main id="main">
    <div class="slider__wrap">
        <div class="slider__img">
            <div class="slider__inner">
                <div class="slider s1"><img src="./img/sliderEffect04-min.jpg" alt="이미지1"></div>
                <div class="slider s2"><img src="./img/sliderEffect08-min.jpg" alt="이미지2"></div>
                <div class="slider s3"><img src="./img/sliderEffect03-min.jpg" alt="이미지3"></div>
                <div class="slider s4"><img src="./img/sliderEffect06-min.jpg" alt="이미지4"></div>
                <div class="slider s5"><img src="./img/sliderEffect10-min.jpg" alt="이미지5"></div>
            </div>
        </div>
    </div>
</main>

구조는 슬라이드 이펙트 2번째와 동일합니다.

 

스크립트_선택자와 변수 설정

// 선택자
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 = 2000;                                              // 이미지 변경 간격 시간
let sliderWidth = slider[0].clientWidth;                                // 이미지 가로값 구하기
let sliderClone = sliderInner.firstElementChild.cloneNode(true);        // 첫 번째 이미지 복사

이번에 새로 추가된 변수가 있습니다.

 

각각의 slider 이미지의 가로값을 구해야 하기 때문에 sliderWidth라는 변수를 설정해줍니다. 그리고 clientWidth를 통해 가로 값을 구해줍니다.

 

element.clientWidth : 요소의 가로값(마진/보더 미포함)

 

그리고 1번 이미지를 복사해서 밑에다 붙일 거기 때문에 sliderInner의 첫 번째 자식을 호출하는 firstElementChild를 사용해 첫 번째 자식을 불러줍니다. 그리고 cloneNode를 통해 복사해줍니다.

 

cloneNode()

cloneNode() 메서드는 JavaScript에서 DOM 노드를 복제하는 메서드입니다. 이 메서드를 사용하면 원본 노드를 변경하지 않고도 노드를 복제할 수 있습니다.

 

스크립트_javascript

<script>
    // 복사한 첫 번째 이미지 마지막에 붙여넣기
    sliderInner.appendChild(sliderClone);

    function sliderEffect(){
        currentIndex++;

        sliderInner.style.transition = "all 0.6s";
        sliderInner.style.transform = `translateX(-${sliderWidth * currentIndex}px)`;

        // 마지막 이미지에 위치했을 때 
        if(currentIndex == sliderCount){
            setTimeout(() => {
                sliderInner.style.transition = "0s";
                sliderInner.style.transform = `translateX(0px)`;
            }, 700);
            currentIndex = 0;
        }
    };

    setInterval(sliderEffect, sliderInterval);
</script>

1. sliderInner 요소에 sliderClone을 복사하여 마지막 자식 요소로 추가합니다.
2. sliderEffect() 함수는 일정 시간 간격으로 실행되며, currentIndex 변수를 증가시키고, sliderInner 요소를 translateX() CSS 속성을 사용하여 이동시킵니다.
3. currentIndex 변수가 sliderCount 변수와 같아지면, sliderInner 요소를 원래 위치로 되돌린 후, currentIndex를 0으로 재설정합니다.
4. setInterval() 함수를 사용하여 sliderEffect() 함수가 일정한 간격으로 실행됩니다.

이미지 슬라이더의 동작을 구현하는 JavaScript 코드입니다. 슬라이더가 자동으로 이미지를 슬라이드하며, 마지막 이미지에 도달하면 처음으로 되돌아가는 무한 루프 동작을 구현합니다.

 

스크립트_GSAP

<!-- GSAP -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script>
<script>
    sliderInner.appendChild(sliderClone);

    function sliderEffect(){
        currentIndex++;

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

        // 마지막 이미지에 위치했을 때 
        if(currentIndex == sliderCount){
            setTimeout(() => {
                gsap.to(".slider__inner", {
                    x: 0,
                    duration: 0
                });
            }, 700);
            currentIndex = 0;
        }
    };
    setInterval(sliderEffect, sliderInterval);
</script>

1. sliderInner 요소에 sliderClone을 복사하여 마지막 자식 요소로 추가합니다.
2. sliderEffect() 함수는 일정 시간 간격으로 실행되며, currentIndex 변수를 증가시키고, gsap.to() 메서드를 사용하여 sliderInner 요소를 x 축으로 이동시킵니다.
3. x 값은 -sliderWidth * currentIndex으로 설정되며, 이는 sliderWidth 변수에 현재 슬라이드 인덱스 값을 곱한 값과 같습니다. 이렇게 함으로써, 슬라이드 요소를 이동시키는 애니메이션 효과가 만들어집니다.
4. currentIndex 변수가 sliderCount 변수와 같아지면, setTimeout() 함수를 사용하여 0.7초 후에 gsap.to() 메서드를 사용하여 sliderInner 요소를 x 축으로 0으로 되돌립니다.
5. currentIndex 변수를 0으로 재설정합니다.
6. setInterval() 함수를 사용하여 sliderEffect() 함수가 일정한 간격으로 실행됩니다.

이미지 슬라이더의 동작을 구현하는 JavaScript 코드입니다. gsap 라이브러리를 사용하여 슬라이더를 구현하며, 마지막 이미지에 도달하면 처음으로 되돌아가는 무한 루프 동작을 구현합니다. gsap 라이브러리를 사용하면, 코드가 짧아지고 애니메이션 효과를 더 쉽게 구현할 수 있습니다.

스크립트_jQuery

<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js"></script>
<script>

    sliderInner.append(sliderClone);

    function sliderEffect(){
        currentIndex++;

        $(".slider__inner").css({
            'transition': 'all 0.6s',
            'transform': `translateX(-${sliderWidth * currentIndex}px)`
        });

        if(currentIndex == sliderCount){
            setTimeout(() => {
                $(".slider__inner").css({
                    'transition': '0s',
                    'transform': 'translateX(0px)'
                });
            }, 700);
            currentIndex = 0;
        }
    };

    setInterval(sliderEffect, sliderInterval);
</script>

 

1. sliderInner 요소에 sliderClone을 복사하여 마지막 자식 요소로 추가합니다.
2. sliderEffect() 함수는 일정 시간 간격으로 실행되며, currentIndex 변수를 증가시키고, jQuery를 사용하여 sliderInner 요소의 transition과 transform 속성을 변경합니다.
3. translateX 값을 -sliderWidth * currentIndex으로 설정하면서, 이전 슬라이드와 현재 슬라이드 사이를 이동하는 애니메이션 효과가 만들어집니다.
4. currentIndex 변수가 sliderCount 변수와 같아지면, setTimeout() 함수를 사용하여 0.7초 후에 jQuery를 사용하여 sliderInner 요소의 transition과 transform 속성을 변경하여 처음으로 되돌립니다.
5. currentIndex 변수를 0으로 재설정합니다.
6. setInterval() 함수를 사용하여 sliderEffect() 함수가 일정한 간격으로 실행됩니다.

이미지 슬라이더의 동작을 구현하는 JavaScript 코드입니다. jQuery를 사용하여 DOM 요소의 스타일을 변경하여 슬라이더를 구현합니다. setTimeout() 함수를 사용하여 슬라이드를 되돌리는 무한 루프 동작을 구현합니다.

완성된 페이지와 소스 보기

 

코드보기