Slider Effect04- 위로 움직이기

setInterval()을 이용한 이미지 슬라이드 - 위로 움직이기

 

//설명. 참고사항.

    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;              // 보이는 이미지 영역의 height 값
        let sliderClone = sliderInner.firstElementChild.cloneNode(true);  //sliderInner의 첫번째 이미지를 복사.
        sliderInner.appendChild(sliderClone);               //복사한 이미지를 sliderInner의 마지막 요소에 추가.

        function sliderEffect(){
            currentIndex++;
            sliderInner.style.transition = "all 0.3s";          //움직이는 시간은 0.3초
            sliderInner.style.transform = "translateY(-"+ sliderHeight * currentIndex +"px)";    //위로 움직이기위해 Y로 translate.    
            //마지막 사진에 갔을 때
                if(currentIndex == sliderCount){                 //마지막 사진까지 갔을 때 if문을 이용해서 실행 
                    setTimeout(() => {             
                            // 이미지 초기화
                        sliderInner.style.transition = "0s";       
                        sliderInner.style.transform = "translateY(0px)";   
                    }, 300);                                    //0.3안에 바로 처음 이미지로 이동하는setTimeout 함수를 적용. 
                    currentIndex =0;        //사진이 첫 번째 순서로 오도록. 실행.
                }
        }
        setInterval(sliderEffect,2000);     //2초 마다 반복되는 setInterval 실행.

setInterval()참고

setInterval() - Web APIs | MDN

 

이번에는 위로 연속적으로 움직이는 슬라이드 입니다.