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

        hljs.highlightAll();
        modal();
        tabMenu();
        
    //slider06
    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 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 +=""
             })
           sliderDot.innerHTML = dotIndex; 
           
           //첫번째 닷 버튼한테 활성화 표시(active) : 화면 들어온 순간부터 불 들어와 있도록
           sliderDot.firstElementChild.classList.add("active");
        }
        init();

        //슬라이드 설정
        function gotoSlider(num){
            //애니메이션(움직임) 설정
            sliderInner.style.transition = "all 400ms";
            sliderInner.style.transform = "translateX("+ -sliderWidth*num +"px)"
            currentIndex = num;

            //currentIndex = n 일때 dot = n, acvtive가 되도록
            dotActive = document.querySelectorAll(".slider_dot .dot"); 
            dotActive.forEach((el) =>{
                el.classList.remove("active")
            })
            dotActive[num].classList.add("active")
        } 

        //이전, 다음 버튼 클릭
        document.querySelectorAll(".slider_btn a").forEach((btn, index) => { 
            btn.addEventListener("click", () => {
                let prevIndex = (currentIndex + (sliderCount - 1)) % sliderCount; 
                let nextIndex = (currentIndex + 1) % sliderCount;

                if (btn.classList.contains("prev")) {
                    gotoSlider(prevIndex); 
                } else {
                    gotoSlider(nextIndex);
                }
            })
        });

        //닷 버튼 누르면 선택 이미지 이동
        document.querySelectorAll(".slider_dot .dot").forEach((dot, index) => { //선택: 닷버튼
            dot.addEventListener("click", () => { //닷버튼을 클릭하면
                gotoSlider(index); //index에 따라 이미지 이동
            })
        })
        

        // 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 sliderDot = document.querySelector(".slider_dot")      //닷버튼

        // let currentIndex = 0; //현재 인덱스 값
        // let sliderCount = slider.length //이미지 갯수
        // let sliderWidth = sliderImg.offsetWidth; //이미지 가로 값 (가져오기) 
        // let dotIndex = ""; //이미지가 추가됐을 때 닷버튼 추가되기 위한 값
        // let dotActive;      //값은 함수안에 설정함. dotActive = document.querySelectorAll(".slider_dot .dot");

        // //나중에 이미지 추가됐을 때 닷버튼이 추가되도록
        // function init(){
        //     //이미지 갯수만큼 
        //     slider.forEach(()=>{
        //         dotIndex +=""
        //      })
        //    sliderDot.innerHTML = dotIndex; //웹문서에 추가
        //     // dotIndex +="" 
        //     // dotIndex +="" 
        //     // dotIndex +="" 
        //     // dotIndex +="" 
        //     // dotIndex +="" 
           
        //    //첫번째 닷 버튼한테 활성화 표시(active) : 화면 들어온 순간부터 불 들어와 있도록
        //    sliderDot.firstElementChild.classList.add("active");
        // }
        // init();

        // //슬라이드 설정
        // function gotoSlider(num){ //현재 인덱스 값대신 num을 넣음
        //     //애니메이션(움직임) 설정
        //     sliderInner.style.transition = "all 400ms";
        //     sliderInner.style.transform = "translateX("+ -sliderWidth*num +"px)"; //시작하면 -800(sliderWidth)만큼 움직임 | currentIndex값에 따라 바뀜
        //     currentIndex = num; //현재 (인덱스) 값을 알기 위해 넣은 값

        //     //currentIndex = n 일때 dot = n, acvtive가 되도록
        //     dotActive = document.querySelectorAll(".slider_dot .dot"); //dot 5개를 저장
        //     //num = [1,2,3,4,5] : 배열요소전체(데이터) 불러오기
        //     dotActive.forEach((el) =>{
        //         el.classList.remove("active") //.dot에서 class active '전부' 삭제 | forEach쓴 이유
        //     })
        //     dotActive[num].classList.add("active") //dot[]에 class active '하나' 추가
        // } 
        // //gotoSlider(currentIndex) : 함수를 호출(실행)하면  해당 값에 따라 해당 이미지로 이동함

        // // //함수 호출 (코드 실행)
        // // sliderBtnPrev.addEventListener("click", () => {
        // //     let prevIndex = (currentIndex + (sliderCount-1)) % sliderCount /
        // //     gotoSlider(prevIndex) 
        // //     console.log("prevIndex :" + prevIndex)
        // //     console.log("currentIndex :" + currentIndex)
        // // })
        // // sliderBtnNext.addEventListener("click", () => {
        // //     let nextIndex = (currentIndex + 1) % sliderCount //이미지 총 갯수(5) 이상 넘어x
        // //     gotoSlider(nextIndex)
        // // })

        // //이전, 다음 버튼 클릭
        // //위의 prve와 next버튼 클릭 했을 때 구문을 한 함수에 쓰기
        // document.querySelectorAll(".slider_btn a").forEach((btn, index) => { //선택: .slider_btn  a : 이전,다음 버튼  | forEach: 실행시킬 구문이 2개라서(다중선택)
        //     btn.addEventListener("click", () => {  //btn: .slider_btn : a의 요소들(prev,next) 선택 ("click" : 요소들을 클릭했을 때,
        //         let prevIndex = (currentIndex + (sliderCount - 1)) % sliderCount; 
        //         let nextIndex = (currentIndex + 1) % sliderCount;
            
        //         //해당 조건에 따라 gotoSlider(슬라이드:이미지가 움직임)이 실행
        //         if (btn.classList.contains("prev")) { // prev클래스가 존재하는 지  | classList.contains : 클래스 존재 여부 확인
        //             gotoSlider(prevIndex);  // 존재하면 prevIndex을 실행 : 클릭하면 현재 이미지의 이전 이미지로 이동 
        //         } else {
        //             gotoSlider(nextIndex); //존재하지 않으면 nextIndex값을 실행  : 클릭하면 현재 이미지의 다음 이미지로 이동
        //         }
        //     })
        // });

        // //닷 버튼 누르면 선택 이미지 이동
        // document.querySelectorAll(".slider_dot .dot").forEach((dot, index) => { //선택: 닷버튼
        //     dot.addEventListener("click", () => { //닷버튼을 클릭하면
        //         gotoSlider(index); //index에 따라 이미지 이동
        //     })
        // })