sliderEffect05 - 버튼 추가

https://garenchoi.github.io/webs_class/javascript/effect/sliderEffect05.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 sliderBtnPrev = sliderBtn.querySelector(".prev");			//sliderBtnPrev에 sliderBtnPrev의 자식 클래스 prev 저장
const sliderBtnNext = sliderBtn.querySelector(".next");			//sliderBtnPrev에 sliderBtnPrev의 자식 클래스 next 저장

let currentIndex = 0;
let sliderCount = slider.length;				//sliderCount에 slider의 갯수(이미지 갯수) 저장
let sliderWidth = sliderImg.offsetWidth;		//sliderWidth에 이미지 가로 값 저장

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의 값으로 변경
}
sliderBtnPrev.addEventListener("click", () => {		//sliderBtnPrev를 클릭 했을 때 이벤트 설정
    let prevIndex = (currentIndex + (sliderCount - 1)) % sliderCount;	//prevIndex에 (currentIndex + (sliderCount - 1)) % sliderCount 값(0,1,2,3,4 안에서 1씩 감소함, -1=4) 저장
    gotoSlider(prevIndex);		//함수 gotoSlider를 매개변수 prevIndex로 실행
});
sliderBtnNext.addEventListener("click", () => {		//sliderBtnNext를 클릭 했을 때 이벤트 설정
    let nextIndex = (currentIndex + 1) % sliderCount;	//nextIndex에 (currentIndex + 1) % sliderCount 값(0,1,2,3,4 안에서 1씩 증가함, 5=0) 저장
    gotoSlider(nextIndex);		//함수 gotoSlider를 매개변수 nextIndex로 실행
});