Slider Effect06 - 닷 버튼 추가

highlightAll(); //highlight.js에 저장된 함수 highlightAll 실행
modal(); //custom.js에 저장된 함수 modal 실행
tabMenu(); //tabMenu.js에 저장된 함수 modal 실행

//sliderType06
const sliderWrap = document.querySelector(".slider__wrap"); //.slider__wrap을 변수(sliderWrap)에 저장
const sliderImg = document.querySelector(".slider__img"); //.slider__img를 변수(sliderImg)에 저장 //이미지 보이는 영역
const sliderInner = document.querySelector(".slider__inner"); //.slider__inner를 변수(sliderInner)에 저장 //이미지 움직이는 영역
const slider = document.querySelectorAll(".slider"); //.slider를 변수(slider)에 저장 //5개의 이미지
const sliderBtn = document.querySelector(".slider__btn"); //.slider__btn을 변수(sliderBtn)에 저장 //버튼들 부모 박스
const sliderDot = document.querySelector(".slider__dot"); //slider__dot을 변수(sliderDot)에 저장 //닷 버튼들 부모 박스

let currentIndex = 0; //첫번쨰 이미지 //현제 보이는 이미지
let sliderCount = slider.length; //이미지 갯수
let sliderWidth = sliderImg.offsetWidth; //이미지 가로 값   
let dotIndex = ""; //닷 버튼
let dotActive; //보이는 이미지의 닷 버튼

//초기값 설정
function init(){ //함수(init) 선언
    slider.forEach(() => dotIndex += "<a href='#'' class='dot'></a>"); //이미지 갯수 만큼 닷 버튼 저장
    sliderDot.innerHTML = dotIndex; //저장 된 닷 버튼을 문서에 표현
    sliderDot.firstElementChild.classList.add("active") //첫 번째 닷 버튼한테 활성활 표시(active)
}
init(); //함수(init) 실행

function gotoSlider(num){ //함수(gotoSlider) 선언 //매게변수(num) 입력
    sliderInner.style.transition = "all 400ms"; //애니메이션 속도 설정
    sliderInner.style.transform = "translateX(" + -sliderWidth * num + "px)"; //위치 설정
    currentIndex = num; //(num-1)번째 보이는 이미지 //변경된 이미지 순서 저장

    dotActive = document.querySelectorAll(".slider__dot .dot"); //"변수(dotActive)를 .slider__dot .dot"로 변경
    //반복문 : 변수(dotActive)의 모든 배열에 클레스(active) 제거
    dotActive.forEach(el => {
        el.classList.remove("active");
    })
    dotActive[num].classList.add("active") //num번째 배열에 클레스(active) 추가
}

//반복문 : .slider__btn a을 클릭했을 떄 실행
document.querySelectorAll(".slider__btn a").forEach((btn, index) => {
    btn.addEventListener("click", () => {
        let prevIndex = (currentIndex + sliderCount -1) % sliderCount; //변수(prevIndex)가 특정숫자(0,1,2,3,4) 한정으로 1씩 감소하도록 저장
        let nextIndex = (currentIndex + 1) % sliderCount; //변수(prevIndex)가 특정숫자(0,1,2,3,4) 한정으로 1씩 증가하도록 저장

        //조건문 : 클레스가 prev인 경우 실행
        if(btn.classList.contains("prev")){
            gotoSlider(prevIndex); //함수(gotoSlider)에 변수(prevIndex) 실행
        } else {
            gotoSlider(nextIndex); //함수(gotoSlider)에 변수(nextIndex) 실행
        }
    })
})

//반목문 : .slider__dot .dot을 클릭했을 떄 실행
document.querySelectorAll(".slider__dot .dot").forEach((dot,index) => {
    dot.addEventListener("click", () => {
        gotoSlider(index); //함수(gotoSlider)에 변수(index) 실행
    })
})