Slider Effect - 닷 버튼 추가

 

설명

화면 하단 부분에 닷 버튼을 추가합니다.

현재의 이미지 인덱스 값과 닷버튼의 인덱스 값을 같게 만들어 닷버튼을 누르면 해당 이미지로 이동합니다

const sliderWrap = document.querySelector(".slider__wrap");
const sliderImg = document.querySelector(".slider__img");        //이미지 보이는 영역
const sliderInner = document.querySelector(".slider__inner");    //이미지 움직이는 영역
const slider = document.querySelectorAll(".slider");             //5개의 이미지 저장
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(){                        //시작 하자마자 실행(초기화 할때 사용)
	slider.forEach(() => {
    	dotIndex += "<a href='#' class='dot'></a>";
        })
        sliderDot.innerHTML = dotIndex;

//첫 번째 닷 버튼에게 활성화 표시(active) --> el.firstElementChild
sliderDot.firstElementChild.classList.add("active");
}
init();


function gotoSlider(num){                                  //이미지의 인덱스 값
	sliderInner.style.transition = "all 400ms";                  
    sliderInner.style.transform = "translateX("+ -sliderWidth * num +"px)";
    //curentIndex--;
    //curentIndex++;
    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; //prevIndex는 - 1 씩 감소
        let nextIndex = (currentIndex + 1) % sliderCount;                 //nextIndex는 + 1 씩 증가
                
        if(btn.classList.contains("prev")){             //만약 버튼을 눌렀을 때 ".prev"가 있으면
        	gotoSlider(prevIndex)                       //gotoSlider(prevIndex)를 실행
            } else {                                        //버튼을 눌렀을 때 ".prev"가 없으면
            gotoSlider(nextIndex)                       //gotoSlider(nextIndex)를 실행
            };
        });
    });
    //닷 버튼을 클릭했을 때 해당 이미지로 이동
    document.querySelectorAll(".slider__dot .dot").forEach((dot, index) => {      //닷 버튼을 눌렀을 때
    	dot.addEventListener("click", () => {
        	gotoSlider(index)                               //이미지의 인덱스 값으로 넘어감
        });
    });