Slider Effect03 - 좌로 움직이기(연속)

highlightAll(); //highlight.js에 저장된 함수 highlightAll 실행
modal(); //custom.js에 저장된 함수 modal 실행
tabMenu(); //tabMenu.js에 저장된 함수 modal 실행

//sliderType03
const sliderWrap = document.querySelector(".slider__wrap"); //.slider__wrap을 변수(sliderWrap)에 저장
const sliderImg = document.querySelector(".slider__img"); //.slider__img를 변수(sliderImg)에 저장 //이미지 보이는 영역
const sliderInner = document.querySelector(".slider__inner"); //.slider__inner를 변수(sliderInner)에 저장 //이미지 움직이는 영역
const slider = document.querySelectorAll(".slider"); //.slider를 변수(slider)에 저장 //5개의 이미지

let currentIndex = 0;                                                //첫번쨰 이미지 //현제 보이는 이미지
let sliderCount = slider.length;                                     //이미지 갯수
let sliderWidth = sliderImg.offsetWidth;                             //이미지 가로 값
let sliderClone = sliderInner.firstElementChild.cloneNode(true);     //첫번째 이미지 복사
sliderInner.appendChild(sliderClone);                                //첫 번째 이미지를 마지막에 넣어줌

//console.log(sliderWidth); //이미지 가로 값 확인

function sliderEffect(){  //함수(sliderEffect) 선언
    currentIndex++;
    sliderInner.style.transition = "all 0.3s"; //애니메이션 속도 설정
    sliderInner.style.transform = "translateX(-" + sliderWidth * currentIndex + "px)"; //위치 설정

    //마지막 사진에 갔을 떄
    if(currentIndex == sliderCount){
        setTimeout(() => {
            //이미지 초기화
            sliderInner.style.transition = "0s"; //애니메이션 속도 초기화
            sliderInner.style.transform = "translateX(0px)"; //위치 초기화
        }, 300);
        currentIndex = 0; //순서 초기화
    }
};
setInterval(sliderEffect, 2000);