Slider Effect - 위로 움직이기(연속적)

 

설명

메커니즘은 좌로 움직이기(Slider Effect)와 같습니다.

1번 이미지 -> 2번 이미지 -> 3번 이미지 -> 4번 이미지 -> 5번 이미지 -> 1번 이미지가 출력됨과 동시에 2번~5번 이미지의 위치가 1번 이미지의 뒤로 옮겨집니다.

좌로 움직이기에서는 translate를 X축으로 줬던 반면, 위로 움직이기는 translate를 Y축으로 주고, 이미지의 총길이를 마찬가지로 X축인 width값이 아닌, Y축인 height값으로 설정해 줍니다.

//slider04
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);                            //첫 번째 이미지를 마지막에 추가

// function sliderEffect(){
//     currentIndex = 0 1 2 3 4 0 1 2 3 4 .....
            
//     currentIndex = (currentIndex % 5)
//     console.log(currentIndex)
//     currentIndex++;
// }
// setInterval(sliderEffect, 2000);

function sliderEffect(){
	currentIndex++;
	sliderInner.style.transition = "all 0.3s";
	sliderInner.style.transform = "translateY(-"+ sliderHeight * currentIndex +"px)"

    // sliderInner.style.transform = "translateY(0px)"
    // sliderInner.style.transform = "translateY(-480px)"
    // sliderInner.style.transform = "translateY(-960px)"
    // sliderInner.style.transform = "translateY(-1440px)"
    // sliderInner.style.transform = "translateY(-1920px)"
    // sliderInner.style.transform = "translateY(-2400px)"
    // sliderInner.style.transform = "translateY(-2880px)"

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