Slider Effect - 연속으로 움직이는 효과

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 sliderWidth = sliderImg.offsetWidth;                             //이미지 가로값
        let sliderClone = sliderInner.firstElementChild.cloneNode(true);     //첫번째 이미지 복사
        sliderInner.appendChild(sliderClone);                                //첫 번째 이미지를 마지막에 넣어줌

        

        function sliderEffect() {           //함수sliderEffect 생성
            currentIndex++;
            sliderInner.style.transition = "all 0.3s";      //이미지 transition효과 0.3초 설정
            sliderInner.style.transform = "translateX(-"+ sliderWidth * currentIndex +"px)";        //이미지1~6번 움직임(-800*(1~5))px

            // sliderInner.style.transfrom = "translateX(-800px)";
            // sliderInner.style.transfrom = "translateX(-1600px)";
            // sliderInner.style.transfrom = "translateX(-2400px)";
            // sliderInner.style.transfrom = "translateX(-3200px)";
            // sliderInner.style.transfrom = "translateX(-4000px)";

            //마지막 사진에 갔을 때
            if(currentIndex == sliderCount) {
                setTimeout(() => {         //setTimeout 이용해 일정 시간이 지난 후에 함수를 실행하는 방법 
                    //이미지 초기화
                    sliderInner.style.transition = "0s";    //이미지 transition효과 초기화
                    sliderInner.style.transform = "translateX(0px)";        //이미지1로 초기화
                }, 300) //0.3초후 함수실행
                
               
                currentIndex = 0;
            }
        }
        setInterval(sliderEffect, 2000);        //setInterval에 함수sliderEffect 설정 , 2초에 한번씩 함수 실행

연속으로 움직이기 사이트 바로가기

슬라이드 이펙트3