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

{
 const sliderWrap = document.querySelector(".slider__wrap")
        const sliderImg = document.querySelector(".slider__img")        //이미지 보이는 영역
        const sliderInner = document.querySelector(".slider__inner")    //이미지 움직이는 전체 영역
        const slider = document.querySelectorAll(".slider")             //슬라이드 이미지
        const sliderBtn = document.querySelector(".slider__btn")    //버튼
        const sliderBtnPrev = sliderBtn.querySelector(".prev")    //이전 버튼
        const sliderBtnNext = sliderBtn.querySelector(".next")    //다음 버튼
        const sliderDot = document.querySelector(".slider__dot")    //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);         //마지막 이미지 복사
        //clone() 제이쿼리에서 복사
        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(currentIndex)

            //오른쪽 버튼 1이 들어가면 이미지 가로값 sliderWidth을 - 함
            if(direction == 1){
                //left : -800px
                sliderInner.style.left = (posInitial - sliderWidth) + "px";
                currentIndex++; //다음을 가야해서  currentIndex ++
            }
            //왼쪽 버튼 
            if(direction == -1){
                sliderInner.style.left = (posInitial + sliderWidth) + "px";
                currentIndex--;
            }
            
            dotActive();
        }
        
        //닷 버튼
        function dotInit(){//이미지 갯수만큼 dot을 추가 
            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 => { //전체 닷 메뉴 active 제거
                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");   //현재 보고있는 이미지에 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)}) //prev 버튼을 클릭하면  -1이 들어감
        sliderBtnNext.addEventListener("click", () => {gotoSlider(1)})  //Next
        sliderInner.addEventListener("transitionend", checkIndex);

        dotInit();
}