사이트만들기 - 슬라이드 유형03

슬라이드 이펙트 - 이미지 추가하기

이번 슬라이드는 이미지가 왼쪽으로 순서대로 나열 되어있고 x축으로 움직여서 이미지를 나타내는 방식입니다. 또한 마지막에 첫번째 이미지가 다시나오고 초기화를
시켜서 끊기지 않고 자연스럽게 이미지가 다시 시작하도록 구현하였습니다.

Javascript

html과 css는 이전과 동일하지만 끝에 이미지를 첫번째 이미지가 나오도록 다시 추가하고
거기서 count를 초기화시켜서 다시 첫번째 이미지부터 시작하도록 하였습니다.

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(-1600px)";
    // sliderInner.style.transform="translateX(-2400px)";
    // sliderInner.style.transform="translateX(-3200px)";
    // sliderInner.style.transform="translateX(-4000px)";
    // sliderInner.style.transform="translateX(-4800px)";

    //마지막 사진에 위치 했을 때
    if(currentIndex == sliderCount){
        setTimeout(() => {                      //setinterval와 달리 한번만 실행한다. 위에서 css에 1번 이미지를 추가해 주었기 때문에 초기화 되어도 티가 나지 않는다.
            sliderInner.style.transition = "0s";
            sliderInner.style.transform = "translateX(0px)"
        }, 700);
        currentIndex = 0;
    }
}
setInterval(sliderEffect, 2000);

결과

원본 소스 보기