Slider Effect01 - 페이드 효과

<script src="js/highlight.min.js"></script> <!-- highlight.js -->
<script src="js/custom.js"></script> <!-- custom.js -->
<script>
    highlightAll(); //highlight.js에 저장된 함수 highlightAll 실행
    modal(); //custom.js에 저장된 함수 modal 실행
    tabMenu(); //tabMenu.js에 저장된 함수 modal 실행

    //sliderType01
    const sliderWrap = document.querySelector(".slider__wrap"); //.slider__wrap을 변수(sliderWrap)에 저장
    const sliderImg = document.querySelector(".slider__img"); //.slider__img를 변수(sliderImg)에 저장
    const slider = document.querySelectorAll(".slider"); //.slider를 변수(slider)에 저장

    let currentIndex = 0; //0(초기값)을 변수(currentIndex)에 저장
    let sliderCount = slider.length; //변수(slide0r) 배열의 갯수(length)를 변수(sliderCount)에 저장

    setInterval(() => { //setInterval(반복실행 할 것,주기(딜레이))
        let nextIndex = (currentIndex + 1) % sliderCount; //(currentIndex + 1) % sliderCount을 변수(nextIndex)에 저장

        slider[currentIndex].style.opacity = '0' //이전 이미지(slider[currentIndex])를 안보이게(style.opacity = '0')
        slider[nextIndex].style.opacity = '1' //지금 이미지(slider[nextIndex])를 보이게(style.opacity = '1')

        //반복문 : 변수(slider)에 속성(style)과 속성 값(transition = 'all 0.3s') 적용
        slider.forEach(slider => {
            slider.style.transition = 'all 0.3s'
        })
        currentIndex = nextIndex; //currentIndex 값이 5이상이 되는 것을 막기 위해 nextIndex으로 조정
    }, 2000); //딜레이 2초