sliderEffect03 - 연속적으로 넘기기

HTML 구성

<section id="sliderType03">
    <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 구성

{
    const sliderInner = document.querySelector(".slider__inner");     // 이미지 움직이는 영역
    const slider = document.querySelectorAll(".slider");     // 각각의 이미지 

    let currentIndex = 0;     // currentIndex를 0으로 선언
    let sliderCount = slider.length;     // sliderCount를 이미지 총 갯수로 선언
    let sliderWidth = sliderImg.offsetWidth;
    // sliderWidth를 패딩 마진 값 다 뺀 콘텐츠 길이로 선언(800px)
    let sliderClone = sliderInner.firstElementChild.cloneNode(true);     // 첫 번째 이미지 복사
    sliderInner.appendChild(sliderClone);     // 첫 번째 이미지를 마지막에 넣어 줌

    function sliderEffect(){     // sliderEffect 함수 선언
        currentIndex++;     // currentIndex 값을 1씩 증가 시킴

        sliderInner.style.transition = "all 0.3s"     // sliderInner의 스타일에 transition 추가
        sliderInner.style.transform = "translateX(-" + sliderWidth * currentIndex  + "px)"
        // sliderInner의 스타일에 transform 추가(-0px, -800px, -1600px, -2400px, -3200px, -4000px)

        // 첫 번째 사진으로 돌아왔을 때 어떻게 할까?
        if(currentIndex == 5){     // 만약 currentIndex가 5라면 = 첫번째 사진으로 돌아왔다면,

            setTimeout(() => {     // 0.3초만에 바꾸자
            sliderInner.style.transition = "0s"     //0초만에
            sliderInner.style.transform = "translateX(0px)"     //x축 기준 0으로 가게 하자
             currentIndex = 0;     //그리곤 currentIndex값을 0으로 설정하자
        }, 300);
    }

    setInterval(sliderEffect, 1000);     // setInterval으로 sliderEffect실행 (1초 간격)
}

<용어 정리>

clientWidth: 패딩, 마진 값을 모두 뺀 컨텐츠의 길이

offsetWidth: 패딩 값을 포함한 (border까지) 컨텐츠의 길이

 

firstElementChild: 첫 번째 자식 요소

cloneNode: 요소를 복사

let sliderClone = sliderInner.firstElementChild.cloneNode(true);

sliderClone은 sliderInnder의 첫번째 자식요소를 복사한 것이다.

 

appendChild: 마지막 자식요소로 받아들인다

sliderInner.appendChild(sliderClone);

sliderInner의 맨 뒤에 sliderClone을 붙인다sliderClone은 sliderInner의 첫 번째 요소이다

 

즉, class="slider__inner"에는 1,2,3,4,5 이미지가 마지막에 1이 추가되어 1,2,3,4,5,1 이미지로 구성되어 있다 

 

 

링크https://sungilryuu.github.io/webs_class/javascript/effect/sliderEffect03.html