sliderEffect04 - 위로 움직이기

const sliderWrap = document.querySelector(".slider__wrap");
const sliderImg = document.querySelector(".slider__img");      // 이미지 보이는 영역
const sliderInner = document.querySelector(".slider__inner");  // 이미지 움직이는 영역
const slider = document.querySelectorAll(".slider");              // 5개의 이미지

let currentIndex = 0;                 // 첫번째 이미지
let sliderCount = slider.length;    // 이미지 갯수
let sliderHeight = sliderImg.offsetHeight  // 이미지 세로값
let sliderClone = sliderInner.firstElementChild.cloneNode(true); // 첫번째 이미지 복사   
sliderInner.appendChild(sliderClone);   //첫번째 이미지를 마지막에 넣어줌

console.log(sliderHeight)
function sliderEffect(){
    currentIndex++; //이미지 하나씩 증가
    sliderInner.style.transition = "all 0.3s"; //움직이는 영역에 효과
    
    //세로축으로 -이미지세로값*이미지index값 px 만큼 움직임
    sliderInner.style.transform = "translateY(-"+ sliderHeight * currentIndex +"px)"; 

    //마지막 이미지로 갔을 때
    if(currentIndex == sliderCount){
        setTimeout(()=> {
            //이미지 초기화
            sliderInner.style.transition = "0s";
            sliderInner.style.transform = "translateY(0px)";
        }, 300)
        currentIndex = 0
    }
}
setInterval(sliderEffect, 2000);