sliderEffect06 - 닷 버튼 추가

https://garenchoi.github.io/webs_class/javascript/effect/sliderEffect06.html

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

let currentIndex = 0;
let sliderCount = slider.length;			//sliderCount에 slider의 갯수(이미지 갯수) 저장
let sliderWidth = sliderImg.offsetWidth;	//sliderWidth에 이미지 가로 값 저장
let dotIndex = "";		//dotIndex에 "" 저장
let dotActive;			//전역변수로 dotActive 선언

function init(){		//함수 init 선언
    for( i of slider){		//for of문 사용
        dotIndex += "<a href='#'' class='dot'></a>"		//dotIndex에 "<a href='#'' class='dot'></a>"추가
    }	//slider의 갯수(이미지 갯수)만큼 반복
    sliderDot.innerHTML = dotIndex;			//sliderDot에 dotIndex 출력

    sliderDot.firstElementChild.classList.add("active");	//sliderDot의 첫번째 자식요소에 클래스 active 추가
}
init();		//함수 init 실행

function gotoSlider(num){			//함수 gotoSlider를 매개변수 num으로 선언
    sliderInner.style.transition = "all 400ms";		//sliderInner의 스타일에 transition "all 400ms" 추가 
    sliderInner.style.transform = "translateX("+ -sliderWidth * num + "px)";	//sliderInner의 스타일에 transform "translateX("+ -sliderWidth * num + "px)" 추가
    currentIndex = num;				//currentIndex의 값을 매개변수 num의 값으로 변경

    dotActive = sliderDot.querySelectorAll(".dot");		//dotActive에 sliderDot의 클래스 dot 저장
    dotActive.forEach(el => {		//dotActive의 element값 el에 저장
        el.classList.remove("active");		//el에 클래스 active 삭제
    })
    dotActive[num].classList.add("active");		//dotActive의 매개변수 num 번째에 클래스 active 추가
}

sliderBtn.querySelectorAll("a").forEach((btn, index) => {	//sliderBtn의 태그 a의 element 값을 btn, index 값을 index에 저장
    btn.addEventListener("click", () => {		//btn을 클릭 했을 때 이벤트 설정
        let prevIndex = (currentIndex + (sliderCount - 1)) % sliderCount;	//prevIndex에 (currentIndex + (sliderCount - 1)) % sliderCount 값(0,1,2,3,4 안에서 1씩 감소함, -1=4) 저장
        let nextIndex = (currentIndex + 1) % sliderCount;	//nextIndex에 (currentIndex + 1) % sliderCount 값(0,1,2,3,4 안에서 1씩 증가함, 5=0) 저장

        if(btn.classList.contains("prev")){		//btn에 클래스 prev가 있을 때
            gotoSlider(prevIndex);		//함수 gotoSlider를 매개변수 prevIndex로 실행
        } else {		//btn에 클래스 prev가 있지 않을 때
            gotoSlider(nextIndex);		//함수 gotoSlider를 매개변수 nextIndex로 실행
        };
    });
});

sliderDot.querySelectorAll("a").forEach((dot, index) => {		sliderDot의 태그 a의 element 값을 dot, index 값을 index에 저장
    dot.addEventListener("click", () => {		//dot을 클릭 했을 때 이벤트 발생
        gotoSlider(index);		//함수 gotoSlider를 매개변수 index로 실행
    });
});