Slider Effect03- 연속적으로 넘기기

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개의 이미지가 저장
    // .slider__inner > div:first-child
    let currentIndex = 0;   
    let sliderCount = slider.length;                   //이미지 갯수
    let sliderWidth = sliderImg.offsetWidth;           //이미지 가로값
    let sliderClone = sliderInner.firstElementChild.cloneNode(true);   //첫 번째 이미지 복사
    sliderInner.appendChild(sliderClone);                  //복사한 첫 번째 이미지를 마지막에 넣어줌

    function sliderEffect(){
        currentIndex++;
        sliderInner.style.transition = "all 0.3s";          //애니메이션 실행 시간이 0.3초
        sliderInner.style.transform = "translateX(-"+ sliderWidth * currentIndex +"px)";    //이미지의 가로값 * 이미지 움직이는 순서.

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

        //마지막 사진에 갔을 때
        if(currentIndex == sliderCount){  //마지막 사진까지 갔을 때.                
            setTimeout(() => {              //마지막 사진에 갔을때 setTimeout으로 초기화.
                // 이미지 초기화
                sliderInner.style.transition = "0s";        //순식간에 다시 1번으로 가는게 바로 이루어져야 한다.
                sliderInner.style.transform = "translateX(0px)";    //위치를 다시 처음으로 가도록 설정.
            }, 300);           //0.3초 만에 마지막 사진(1번 사진)에서 처음사진으로.  
            currentIndex =0;        //사진이 첫 번째 순서로.
        }
    }
    setInterval(sliderEffect,2000);    //함수를 따로 빼서 인터벌 실행.

setInterval()참고

setInterval() - Web APIs | MDN

부드럽게 연속적으로 넘기는 슬라이드 예제 입니다. 

마지막 사진까지 이동한 후, 다시 처음 사진부터 시작하는 순환하는 구조를 가졌습니다. 

그렇게 하기 위해서는 첫 번째 이미지를 복사해서 마지막 이미지 다음에 붙인 후  마지막에 있는 1번 이미지에서 최초의 1 번 이미지로 순식간에 이동하는 애니메이션이 필요해서