JavaScript Slider Effect01

    <section id="sliderType01">
        <div class="slider__wrap">
            <div class="slider__img">
                <div class="slider"><img src="img/img01.jpg" alt="이미지1"></div>
                <div class="slider"><img src="img/img02.jpg" alt="이미지2"></div>
                <div class="slider"><img src="img/img03.jpg" alt="이미지3"></div>
                <div class="slider"><img src="img/img04.jpg" alt="이미지4"></div>
                <div class="slider"><img src="img/img05.jpg" alt="이미지5"></div>
            </div>
        </div>
    </section>

    #modal.show .modal-wrap {
        animation: zoomOut 0.5s 1s ease forwards; /* 0.5s(애니메이션 지속 시간) 0.5s(딜레이) */
    }
    
    #modal.show.hide .modal-wrap {
        animation: zoomIn 0.5s ease forwards; /* 0.5s(애니메이션 지속 시간) 0.5s(딜레이) */
    } 
    
    @keyframes foldOut {
        0% {
            transform: scaleX(0) scaleY(0.005)
        }
    
        50% {
            transform: scaleX(1) scaleY(0.005)
        }
    
        100% {
            transform: scaleX(1) scaleY(1)
        }
    }
    
    @keyframes foldIn {
        0% {
            transform: scaleX(1) scaleY(1)
        }
        
        50% {
            transform: scaleX(1) scaleY(0.005)
        }
        
        100% {
            transform: scaleX(0) scaleY(0.005)
        }
    }
    
    @keyframes zoomOut {
        0% {
            transform : scale(0);
        }
    
        100% {
            transform : scale(1);
        }
    }
    
    @keyframes zoomIn {
        0% {
            transform : scale(1);
        }
    
        100% {
            transform : scale(0);
        }
    }

    const sliderWrap = document.querySelector(".slider__wrap");     // 이미지의 전체 영역
    const sliderImg = document.querySelector(".slider__img");       // 보이지는 이미지 영역
    const slider = document.querySelectorAll(".slider");            // 각각의 이미지

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

    setInterval(() => {
        let nextIndex = (currentIndex + 1) % 5; // 1, 2, 3, 4, 0 값을 반복하기 위해(이미지를 인덱스 순서대로 보여주기 위함) 5로 나눈 나머지 값을 이용
        console.log(nextIndex);

        slider[currentIndex].style.opacity = "0"; // 첫번째 이미지를 보이지 않게 opcacity에 0 대입
        slider[nextIndex].style.opacity = "1";    // 두번째 이미지를 보이게 opcacity에 1 대입

        currentIndex = nextIndex;                 // 현재 이미지에 다음 이미지의 인덱스 값을 대입(다음 이미지를 보여주기 위해 nextindex 값을 currentindex값에 추가)
        
        slider.forEach(slider => {
            slider.style.transition = "all 0.3s"; // 이미지가 변경되는 시간을 0.3초 지연
        });

        //2초가 지나면 
        // 첫번째 이미지의 opacity 값은 0
        // 두번째 이미지의 opacity 값은 1

        //2초가 지나면 
        // 첫번째 이미지의 opacity 값은 0
        // 두번째 이미지의 opacity 값은 0
        // 세번째 이미지의 opacity 값은 1

        //2초가 지나면 
        // 첫번째 이미지의 opacity 값은 0
        // 두번째 이미지의 opacity 값은 0
        // 세번째 이미지의 opacity 값은 0
        // 네번째 이미지의 opacity 값은 1
    }, 2000); // 함수를 여러번 실행시키는 함수