Slider Effect05 - 버튼 추가

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

//sliderType05
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 sliderBtnPrev = sliderBtn.querySelector(".prev"); //.prev 변수(sliderBtnPrev)에 저장 //이전 버튼
const sliderBtnNext = sliderBtn.querySelector(".next"); //.next 변수(sliderBtnNext)에 저장 //다음 버튼

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

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

sliderBtnPrev.addEventListener("click", () => { //이전 버튼 클릭
    let prevIndex = (currentIndex + sliderCount -1) % sliderCount; //변수(prevIndex)가 특정숫자(0,1,2,3,4) 한정으로 1씩 감소하도록 저장
    gotoSlider(prevIndex); //함수(gotoSlider)에 변수(prevIndex) 실행
})

sliderBtnNext.addEventListener("click", () => { //다음 버튼 클릭
    let nextIndex = (currentIndex + 1) % sliderCount; //변수(prevIndex)가 특정숫자(0,1,2,3,4) 한정으로 1씩 증가하도록 저장
    gotoSlider(nextIndex); //함수(gotoSlider)에 변수(nextIndex) 실행
})