sliderEffect03

sliderEffect03 - 좌로 움직이기(연속적으로)

세번째 슬라이드 이펙트 - 좌로 움직이기(연속적으로) 입니다. 2번 슬라이드 이펙트에서 마지막 사진에서 1번으로 되돌아가는것이 아닌, 뒤쪽에 1번~ 이미지가 지속적으로 업데이트 되어 연속적으로 움직이게 하였습니다.

---

참고

슬라이드 이펙트 03 페이지 우측하단 소스 보기를 클릭하시면 JAVASCRIPT, HTML, CSS를 확인할 수 있습니다.

원본 소스 보기 메인 페이지 보기

JAVASCRIPT

애니메이션 효과가 보여지는 영역, 이미지가 움직일 영역, 각각의 이미지 선택자를 선언합니다.
다음은 변수를 선언합니다.(offsetWidth = 가로 크기, firstElementChild = 첫번째 요소, appendChild = 특정 요소를 마지막에 넣어줌)
함수를 생성하는데, 0.6초의 애니메이션 시간을 설정하고 x축으로 이미지의 가로크기 * 이미지의 갯수를 설정하여 1장씩 넘어가도록 합니다.
if함수를 통해 마지막 사진에 위치 했을 때 애니메이션 효과를 주고 currentIndex값을 초기화하여 지속적으로 애니메이션이 실행되도록 합니다.
setInterval(2000) = 2초마다 함수(애니메이션)를 반복 실행합니다.

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)";

    // 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

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