05. 이미지 슬라이드 : 좌로 움직이기 / 버튼 추가

        hljs.highlightAll();
        modal();
        tabMenu();
        
    //slider05
        const sliderWrap = document.querySelector(".slider_wrap") //전체
        const sliderImg = document.querySelector(".slider_img")      //이미지 (한칸만) 보이는 영역
        const sliderInner = document.querySelector(".slider_inner")    //이미지 움직이는 영역 
        const slider = document.querySelectorAll(".slider")             //5개의 이미지 저장 console.log(slider): 5개 저장한 이미지 확인 가능
        const sliderBtn = document.querySelector(".slider_btn")        
        const sliderBtnPrev = sliderBtn.querySelector(".Prev") //버튼 안에서 prev를 찾아라    /Prev을 선택     
        const sliderBtnNext = sliderBtn.querySelector(".Next") //버튼 안에서 Next를 찾아라         

        let currentIndex = 0; //현재 인덱스 값
        let sliderCount = slider.length //이미지 갯수
        let sliderWidth = sliderImg.offsetWidth; //이미지 가로 값 (가져오기)  

        function gotoSlider(num){ //현재 인덱스 값대신 num을 넣음
            sliderInner.style.transition = "all 400ms";
            sliderInner.style.transform = "translateX("+ -sliderWidth*num +"px)"; //시작하면 -800(sliderWidth)만큼 움직임 | currentIndex값에 따라 바뀜
            currentIndex = num; //현재 값을 알기 위해 넣은 값
            // currentIndex(현재 인덱스 값)에 현재값(num)을 집어넣음  | currentIndex++, currentIndex--와 같게 해줌(얘들은 누른대로 실행이 안됨)
        }
        
        //함수 호출 (코드 실행)
        sliderBtnPrev.addEventListener("click", () => { //Prev을 click 했을 때 아래와 같은 코드를 실행(이벤트 발생)하라
            // let prevIndex = currentIndex - 1; //이미지 총 갯수 넘어감
            let prevIndex = (currentIndex + (sliderCount-1)) % sliderCount //이미지 총 갯수(5) 이상 넘어x + 이미지 1일때 -> 마지막 이미지 가게
            //첫번째 있을 때 0 --> 4
            //if문 :  if(currentIndex == 0 ) prevIndex = sliderCount -1:
            //0 1 2 3 4 
            gotoSlider(prevIndex) // 함수 호출하기 : gotoSlider(이미지의 인덱스 = 매개변수 : num으로 데이터가 넘어감)  : 해당 순서(인덱스) 이미지로 슬라이드
            
            // 값이 어떻게 들어가는 지 확인
            console.log("prevIndex :" + prevIndex)
            console.log("currentIndex :" + currentIndex)
        })
        sliderBtnNext.addEventListener("click", () => {//next을 click 했을 때 아래와 같은 코드를 실행(이벤트 발생)하라
            // let nextIndex = currentIndex + 1; //이미지 총 갯수 넘어감
            let nextIndex = (currentIndex + 1) % sliderCount //이미지 총 갯수(5) 이상 넘어x
            gotoSlider(nextIndex)
        })