sliderEffect07 - 무한, 닷 버튼 추가

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 = sliderBtn.querySelector(".prev") // 왼쪽 버튼
const sliderBtnNext = sliderBtn.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;

    // 오른쪽 버튼
    if(direction == 1){
        // left = -800px
        sliderInner.style.left = (posInitial-sliderWidth) + "px";
        currentIndex++;
    }

    // 왼쪽 버튼
    if(direction == -1){
        sliderInner.style.left = (posInitial+sliderWidth) + "px";
        currentIndex--;
    }
    dotActive()

}

//이미지 갯수만큼 dot을 추가
function dotInit(){                                 
    for(let i=0; i<sliderLength; i++){
        dotIndex += ""
    }
    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;
    }
}

// 버튼 클릭하기
sliderBtnPrev.addEventListener("click",()=>{gotoslider(-1)});
sliderBtnNext.addEventListener("click",()=>{gotoslider(1)});
sliderInner.addEventListener("transitionend", checkIndex)
dotInit()