Slider Effect 01 - 페이드 효과

        hljs.highlightAll();
        modal();
        tabMenu();

        //slider01
        //겹쳐진 이미지를 opacity(불투명도 조절)을 이용해서 차례대로 보여주기 
        //앞에 이미지들이 0이 되어야 뒤에 이미지가 보임
    
        //변수 설정 : 선택하기
        const sliderWrap = document.querySelectorAll(".slider_wrap") //전체
        const sliderImg = document.querySelectorAll(".slider_img")  //이미지 묶음 | 요소: 이미지1....이미지5
        const slider = document.querySelectorAll(".slider")         //이미지

        let currentIndex = 0; //현재 보이는 이미지
        let sliderCount = slider.length // 이미지 갯수

        setInterval(()=>{  //setInterval()메서드를 함수를 반복적으로 호출 해줌

            //다음이미지 인덱스 = (현재이미지 인덱스+ 1) % 5 
            //현재이미지보다 +1이 크고 0으로 다시 초기화(이미지 반복적으로 다시 보여주기 위해)
            let nextIndex =  (currentIndex+ 1) % 5; //12340 12340 12340 
            //        몫   나머지
            // 1 / 5 = 0 ... 1
            // 2 / 5 = 0 ... 2
            // 3 / 5 = 0 ... 3
            // 4 / 5 = 0 ... 4
            // 5 / 5 = 1 ... 0
            // 6 / 5 = 1 ... 1
            // 7 / 5 = 1 ... 2            

            // console.log("currentIndex :" + currentIndex)
            // console.log("nextIndex :" + nextIndex)

            //애니메이션 속도 설정(transition) : 0.3초동안 보여줌
            slider.forEach(slider =>{
                slider.style.transition = "all 0.3s"
            })

            //이미지 불투명도 설정
            slider[currentIndex].style.opacity = "0" // 앞(현재)에 이미지를 안 보이게
            slider[nextIndex].style.opacity = "1"   // 다음 이미지를 보이게

            //첫번째 실행
            //slider[0] = opacity:0 - 이미지1 | currentIndex : 0 
            //slider[1] = opacity:1 - 이미지2 | nextIndex  : 1
            
            currentIndex = nextIndex;  //currentIndex:0 ,nextIndex:1 -> currentIndex:1, nextIndex:1.....currentIndex:n, nextIndex:n
            //currentIndex++;와 같지만 이렇게 쓰면 0으로 초기화 되지 않아서 5번까지 보여주고 1번으로 돌아오면 거기서 멈춤
            //slider[6]부터 이미지가 없기 때문
            
            //두번째 실행됐을 때 
            //slider[1] = opacity:0
            //slider[2] = opacity:1

            //3번
            //currentIndex : 2
            //nextIndex  : 3
            
            //4번
            //currentIndex : 3
            //nextIndex  : 4

            //5번
            //currentIndex : 4
            //nextIndex  : 0

            //6번
            //currentIndex : 0
            //nextIndex  : 1

        },2000); //함수를 2초마다 호출 하도록 설정 - 그래서 이미지1번(slider[0])부터 시작(함수 실행하면 2번slider[1]부터 보임)

        //2초가 지나면
            //첫번째 이미지는 --> opacity : 0
            //두번째 이미지는 --> opacity : 1

            //2초가 지나면
            //첫번째 이미지는 --> opacity : 0
            //두번째 이미지는 --> opacity : 0 
            //세번째 이미지는 --> opacity : 1 

            //2초가 지나면
            //첫번째 이미지는 --> opacity : 0
            //두번째 이미지는 --> opacity : 0
            //세번째 이미지는 --> opacity : 0
            //네번째 이미지는 --> opacity : 1
        //라는 함수 완성!