[Slide Effect] 슬라이드 이펙트 03 - 좌로 움직이기(연속적으로)

슬라이드 이펙트 03

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

자, 그럼 시작해볼까요?

---

01. 변수와 상수(const/let) 선언하기

필요한 만큼의 변수와 상수를 선언해주도록 한다.

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;                                    // 이미지 개수
let sliderWidth = sliderImg.offsetWidth;                            // 이미지 가로값
let sliderClone = sliderInner.firstElementChild.cloneNode(true);    // 첫번째 이미지 복사
sliderInner.appendChild(sliderClone);                               // 첫번째 이미지를 마지막에 넣어줌

02. 애니메이션 효과 주기

아래 코드와 같이 CSS에서 주던 방식과 흡사하게 transition, transform 등으로 애니메이션 효과를 줄 수 있다.

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;                                    // 이미지 개수
let sliderWidth = sliderImg.offsetWidth;                            // 이미지 가로값
let sliderClone = sliderInner.firstElementChild.cloneNode(true);    // 첫번째 이미지 복사
sliderInner.appendChild(sliderClone);                               // 첫번째 이미지를 마지막에 넣어줌
    
function sliderEffect() {
    currentIndex++;
    sliderInner.style.transition = "all 0.6s";  // 부드러운 움직임
    sliderInner.style.transform = "translateX(-"+ sliderWidth * currentIndex +"px)";    // 이미지 width값(800px) * 이미지 번호
    
    // 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
    // sliderInner.style.transform = "translateX(-4000px)";     800*5
    // sliderInner.style.transform = "translateX(-4800px)";     800*6

03. 마무리 작업

마지막 사진에서 다시 첫번째 사진으로 돌아올 때 부자연스러운 동작을 아래 예시 코드와 같이 자연스럽게 만든다.

     // 마지막 사진에 위치했을 때
    // 현재 이미지 번호 == 이미지 개수가 같아질 때 (마지막을 의미함)
    if(currentIndex == sliderCount) {
        setTimeout(() => {
            sliderInner.style.transition = "0s";
            sliderInner.style.transform = "translateX(0px)";
        }, 700);    // setTimeout으로 마지막에서 첫번째로 돌아올 때의 움직임 부드럽게 함
    
        currentIndex = 0;   // 마지막 사진 왔을 때 초기화시킴
    }
}    

원본(HTML/JS) 소스 보기

CSS 소스 보기