SliderEffect - 03

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

이미지 슬라이드가 자연스럽게 이어지는 효과를 만들 수 있습니다.

원본 소스 보기

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;                                    //이미지 갯수
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 = "translsteX(-1600px)";      800*2
    // // // sliderInner.style.transform = "translsteX(-2400px)";   800*3    
    // // // sliderInner.style.transform = "translsteX(-3200px)";   800*4
    // // // sliderInner.style.transform = "translsteX(-4000px)";   800*5
    // // // sliderInner.style.transform = "translsteX(-4800px)";   800*6

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

setTimeout(() => {}, 700)

setTimeout() 메서드는 코드를 바로 실행하지 않고 일정시간 기다린 후 실행해야 할때 사용합니다. 첫번째 인자로 실행코드가 담겨있는 함수를 받고, 두번째는 지연시간을 받습니다. 이때 시간은 밀리초(ms)로 받습니다.