sliderEffect04 - 위로 넘기기

https://sungilryuu.github.io/webs_class/javascript/effect/sliderEffect04.html

HTML 구성

<section id="sliderType04">
    <div class="slider__wrap">
        <div class="slider__img">
            <div class="slider__inner">
                <div class="slider"><img src="img/images01.jpg" alt="이미지1"></div>
                <div class="slider"><img src="img/images02.jpg" alt="이미지2"></div>
                <div class="slider"><img src="img/images03.jpg" alt="이미지3"></div>
                <div class="slider"><img src="img/images04.jpg" alt="이미지4"></div>
                <div class="slider"><img src="img/images05.jpg" alt="이미지5"></div>
            </div>
        </div>
    </div>
</section>

JS 구성

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

function sliderEffect(){     // sliderEffect 함수
    currentIndex++;

    sliderInner.style.transition = "all 0.3s"     // css 설정
    sliderInner.style.transform = "translateY(-" + sliderHeight * currentIndex  + "px)"     // css 설정 (y축 기준)
    
    //마지막 사진에 갔을 때
    if(currentIndex == 5){     // currentIndex가 5(마지막 사진 다음 장)으로 갔을 때
        setTimeout(() => {     // 일정한 시간 간격 설정 (0.3초)
        sliderInner.style.transition = "0s"     // 0초만에
        sliderInner.style.transform = "translateY(0px)"     // y축 기준 0px로 가라
    }, 300);     // 0.3초
        currentIndex = 0;
    }
}
setInterval(sliderEffect, 1000);     // 1초 간격으로 움직여라

 

앞의 sliderEffect3의 x축 기준을 y 축 기준으로 바꿔주면 된다

 

링크