Slider Effect 무한, 버튼 추가, 닷 버튼 추가

 

설명

1번~5번 이미지 맨 앞과 맨 뒤에 이미지를 복사를 합니다. 5번 1번 2번 3번 4번 5번 1번 이미지 순으로 이미지가 생성됩니다.
그 후 맨뒤에 있는 1번이 나올 때 1번 이미지의 인덱스를 [0]으로 바꿔줍니다. 실제 맨 뒤 1번 이미지의 인덱스는 [5] 입니다.
맨 앞에 있는 5번의 이미지가 왔을 때에는 인덱스를 [4]로 바꿔줍니다. 실제 맨 앞 5번 이미지의 인덱스는 [-1]입니다.
그렇게 하면 마치 무한으로 이미지 슬라이드가 보여지는 효과를 낼 수 있습니다.

//slider07
const sliderWrap = document.querySelector(".slider__wrap");
const sliderImg = document.querySelector(".slider__img");        //이미지 보이는 영역
const sliderInner = document.querySelector(".slider__inner");    //이미지 움직이는 영역
const slider = document.querySelectorAll(".slider");             //5개의 이미지 저장
const sliderBtn = document.querySelector(".slider__btn");
const sliderBtnPrev = document.querySelector(".prev");
const sliderBtnNext = document.querySelector(".next");
const sliderDot = document.querySelector(".slider__dot");

let currentIndex = 0;                               
    let sliderWidth = sliderImg.offsetWidth;            //이미지 가로값
    let sliderLength = slider.length;                   //이미지 갯수
    let sliderFirst = slider[0];                        //첫번째 이미지
    let sliderLast = slider[sliderLength - 1];          //마지막 이미지
    let cloneFirst = sliderFirst.cloneNode(true);       //첫번째 이미지 복사
    let cloneLast = sliderLast.cloneNode(true);         //마지막이미지 복사
    let posInitial = "";
    let dotIndex = "";

    //이미지 복사 appendTo / prependTo  :  append / prepend
    sliderInner.appendChild(cloneFirst);
    sliderInner.insertBefore(cloneLast, sliderFirst);

    
    //이미지 움직이기
    function gotoSlider(direction){
        sliderInner.classList.add("transition");
        posInitial = sliderInner.offsetLeft;
        console.log(posInitial)
        
        //next 버튼
        if(direction == 1){
            // left : -800px
            sliderInner.style.left = (posInitial - sliderWidth) + "px";
            currentIndex++;
        }
        //prev 버튼
        if(direction == -1){
            // left : 800px
            sliderInner.style.left = (posInitial + sliderWidth) + "px";
            currentIndex--;
        }
        
        dotActive();
    }

    //닷 버튼
    function dotInit(){
        for(let i=0; i<sliderLength; i++){
            dotIndex += "<a href='#' class='dot'></a>";
        }
        sliderDot.innerHTML = dotIndex;
        sliderDot.firstElementChild.classList.add("active");
    }

    // 닷 버튼 활성화
    function dotActive(){
        let dotAll = document.querySelectorAll(".slider__dot .dot");
        //전체 닷 메뉴 비활성화
        dotAll.forEach(dot => {
            dot.classList.remove("active");
        });
        
        //마지막 이미지 왔을 때
        if(currentIndex == sliderLength){

            dotAll[0].classList.add("active");

        } else if(currentIndex == -1){         //처음 이미지 왔을 때

            dotAll[sliderLength -1].classList.add("active");

        } else {

            dotAll[currentIndex].classList.add("active");       //현재 보고있는 이미지 닷 활성화
        }
    }

    // 애니메이션 완료 후
    function checkIndex(){
        sliderInner.classList.remove("transition");
        
        // 이미지 처음 시작부분
        if(currentIndex == -1){
            sliderInner.style.left = -(sliderLength * sliderWidth) + "px";
            currentIndex = sliderLength -1;
        }

        // 이미지 마지막 부분
        if(currentIndex == sliderLength){
            sliderInner.style.left = -(1 * sliderWidth) + "px";
            currentIndex = 0;
        }
    }
    dotInit();
    
    //버튼 클릭하기
    sliderBtnPrev.addEventListener("click", () => {gotoSlider(-1)});
    sliderBtnNext.addEventListener("click", () => {gotoSlider(1)});
    sliderInner.addEventListener("transitionend", checkIndex);