슬라이드 이펙트 (3)

⭐️ 슬라이드 이펙트 03 ⭐️

01. < script > 에 작성하기

    const sliderWrap = document.querySelector(".slider__wrap");
    const sliderImg = document.querySelector(".slider__img");           // 보여지는 영역
    const sliderInner = document.querySelector(".slider__inner");       // 움직이는 영역
    const slider = document.querySelectorAll(".slider");                // 이미지들
 
    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.6s"
        sliderInner.style.transform = "translateX(-"+ sliderWidth * currentIndex +"px)";
 
        // sliderInner.style.transform = "translateX(-800px)";  800 * 1  규칙 파악하기
        // sliderInner.style.transform = "translateX(-1600px)"; 800 * 2
        // sliderInner.style.transform = "translateX(-2400px)"; 800 * 3
        // sliderInner.style.transform = "translateX(-3200px)"; 800 * 4
        // sliderInner.style.transform = "translateX(-4000px)"; 800 * 5
        // sliderInner.style.transform = "translateX(-4800px)"; 800 * 6
 
        // 마지막 이미지 다음에 첫번째 이미지가 나오도록, 마지막 이미지에 위치했을 때 모두 초기화 시켜주기 : (6번째에 첫번째 이미지를 넣어줘야 빈 공간이 안 생김)
        // 현재 보이는 이미지가 
        if(currentIndex == sliderCount){
            // sliderInner.style.transition = "0s"                  // 맨 마지막에 복사한 첫번째 이미지가 전환효과 없이 뜨기 때문에 어색함. 이럴 때는 setTimeout 을 활용하면 해결됨
            // sliderInner.style.transform = "translateX(0px)";
 
            // setTimeout 을 이용하면 전환 애니메이션이 나오고 나서 (0.6 초 이후), 첫번째 이미지로 바꾸는 것이 가능함 -> 첫번째 이미지로 돌아갈 때도 부드럽게 전환 가능
            setTimeout(() => {
                sliderInner.style.transition = "0s"
                sliderInner.style.transform = "translateX(0px)";
            }, 700);    // (0.6초 이후에 실행하도록 700 을 넣어줌)
 
            currentIndex = 0;
        }
    }
    setInterval(sliderEffect, 2000);

03. 결과보기

☛ 원본 소스 보기