Slider Effect 06 - 닷 추가

{
  		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 sliderDot = document.querySelector(".slider__dot")    //dot 버튼
        

        let currentIndex = 0;     //현재 보이는 이미지
        let sliderCount = slider.length; //이미지의 총 갯수
        let sliderWidth = sliderImg.offsetWidth; //이미지 가로 값
        let dotIndex = "";              
        let dotActive;              
        
        
        function init(){
            slider.forEach((sliderDot)=> {
                dotIndex += ""      //이미지 갯수만큼   생성
            });
            sliderDot.innerHTML = dotIndex;
            sliderDot.firstElementChild.classList.add("active") //첫번째 닷한테 active 추가
        }
        init();

        function gotoSlider(num){  
            sliderInner.style.transition = "all 400ms"        //slider__inner에게 style transition 추가
            sliderInner.style.transform = "translateX("+ -sliderWidth * num + "px)"; //slider__inner에 transitionX + 이미지 가로값 + PX 추가
            currentIndex = num;         //currentIndex-- currentIndex++ 

            dotActive = document.querySelectorAll(".slider__dot .dot");
            dotActive.forEach(el => {
                el.classList.remove("active");      //dot에 active 제거 
            })
            dotActive[num].classList.add("active"); //현재 보이는 이미지의 dot에 active 추가
        }
        
        document.querySelectorAll(".slider__btn a").forEach((btn, index)=> {
            btn.addEventListener("click", ()=>{
                let prevIndex = (currentIndex + (sliderCount - 1)) % sliderCount;
                let nextIndex = (currentIndex + 1) % sliderCount;

                if(btn.classList.contains("prev")){
                gotoSlider(prevIndex);
                }else {
                gotoSlider(nextIndex);
            }
        })
    })

        document.querySelectorAll(".slider__dot .dot").forEach((dot, index)=> {
            dot.addEventListener("click", ()=>{
                gotoSlider(index);
            })
        })
}