Slider Effect05- 버튼 추가

 // slider05
 const sliderWrap = document.querySelector(".slider__wrap");      //sliderWrap에 div 태그 .slider__wrap 저장
 const sliderImg = document.querySelector(".slider__img");        //sliderImg에 div 태그 .slider_img 저장, 이미지 한 칸만 보이는 영역
 const sliderInner = document.querySelector(".slider__inner");    //이미지 움직이는 영역
 const slider = document.querySelectorAll(".slider");             //slider에 div 태그 .slider (최종적으로 이미지를 담는 다섯개의 div)
 const sliderBtn = document.querySelector(".slider__btn");
 const sliderBtnPrev = sliderBtn.querySelector(".prev");
 const sliderBtnNext = sliderBtn.querySelector(".next");

let currentIndex = 0;
let sliderCount = slider.length;    //이미지 갯수
let sliderWidth = sliderImg.offsetWidth;    //이미지 가로 값

function gotoSlider(num){
	sliderInner.style.transition = "all 400ms";     //0.4초
    sliderInner.style.transform = `translateX(-${sliderWidth * num}px)`;
    currentIndex = num;
}
       
sliderBtnPrev.addEventListener("click", () => {		//prev 버튼을 눌렀을 때
	let prevIndex = (currentIndex + (sliderCount -1)) % sliderCount;	//첫번째 이미지를 보고 있을 때 -를 햇을때 -> 마지막으로 갈 수 있게
    //첫번째 있을 때 0--> 4
    // if( currentIndex == 0 ) prevIndex = sliderCount -1;
    // 0 1 2 3 4
    gotoSlider(prevIndex);
})

sliderBtnNext.addEventListener("click", () => {		//next 버튼을 눌렀을 때
	let nextIndex = (currentIndex + 1) % sliderCount;	//이미지 갯수를 넘어가지 못하게 최대값을 정해둔다.
    //이미지 총 갯수 이상 넘어가지 X 
    gotoSlider(nextIndex);
}) 

setInterval() - Web APIs | MDN

슬라이드 이펙트