Slider Effect06- 닷 버튼 추가

// slider06
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");  
const sliderBtn = document.querySelector(".slider__btn");
const sliderDot = document.querySelector(".slider__dot");

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

function init(){
	//이미지 갯수 만큼<a></a>
	// dotIndex += "<a href='#' class='dot'></a>"
	// dotIndex += "<a href='#' class='dot'></a>"
	// dotIndex += "<a href='#' class='dot'></a>"
	// dotIndex += "<a href='#' class='dot'></a>"
	// dotIndex += "<a href='#' class='dot'></a>"
	slider.forEach(() => dotIndex += "<a href='#' class='dot'></a>");
    sliderDot.innerHTML = dotIndex;
    //첫번째 닷 버튼한테 활성화표시(active)
    sliderDot.firstElementChild.classList.add("active");
}
init();

function gotoSlider(num){
	sliderInner.style.transition = "all 400ms";     //0.4초
    //가로축으로 -이미지가로값 * num px 만큼 이동
	sliderInner.style.transform = `translateX(-${sliderWidth * num}px)`;
	currentIndex = num;

	dotActive = document.querySelectorAll(".slider__dot .dot");
    // num = [1,2,3,4,5]
    dotActive.forEach(el => {
   		 el.classList.remove("active"); 	//닷 버튼들에 active 삭제
     }) 
     dotActive[num].classList.add("active");	//닷 버튼들에 active 추가
 }

document.querySelectorAll(".slider__btn a").forEach((btn, index) => {
	btn.addEventListener("click", () => {	 //버튼 클릭시
    	let prevIndex = (currentIndex + (sliderCount -1)) % sliderCount;	 //prev버튼 첫번째이미지에서 마지막이미지로
        let nextIndex = (currentIndex + 1) % sliderCount;	//next버튼 마지막이미지에서 첫번째이미지로

		if(btn.classList.contains("prev")){		// 버튼에 prev가 있다면
        	gotoSlider(prevIndex);		 // prev버튼 동작
        } else {		 // 버튼에 prev가 없다면
        	gotoSlider(nextIndex);		 // next버튼 동작
        };
    });
});
       
document.querySelectorAll(".slider__dot .dot").forEach((dot,index) => {
	dot.addEventListener("click", () => {		// 닷 버튼 클릭시
    gotoSlider(index);		// gotoSlider에 매개변수 index 저장
    })
})

setInterval() - Web APIs | MDN

슬라이드 이펙트