Javascript Slide Effect03

이미즈 슬라이드 - 연속적으로 넘기기

<section id="sliderType01">
    <div class="slider__wrap">
        <div class="slider__img">
            <!-- slider*5>img[src="img/img$$.jpg" alt="이미지$"] -->
            <div class="slider"><img src="img/imges01.png" alt="이미지1"></div>
            <div class="slider"><img src="img/imges02.jpg" alt="이미지2"></div>
            <div class="slider"><img src="img/imges03.jpg" alt="이미지3"></div>
            <div class="slider"><img src="img/imges04.jpg" alt="이미지4"></div>
            <div class="slider"><img src="img/imges05.jpg" alt="이미지5"></div>
        </div>
    </div>
</section>

<style>
    @import url(css/NexonLv1Gothic.css);
    @import url(css/github.min.css);
    @import url(css/custom.css);

    /* slider */
    .slider__wrap {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100vh;
    }
    .slider__img {  /* 화면 보이는 구간 */
        width: 800px;
        height: 480px;
        overflow: hidden;
    }
    .slider__inner {    /* 움직이는 영역 */
        display: flex;
        width: 4800px;      /* 이미지 총 길이 */
        transform: translateX(0);
    }
    .slider {
        width: 800px;
    }
    .slider__img .slider{
        position: relative;
    }
    .slider::before {
        position: absolute;
        left: 5px; top: 5px;
        background: rgba(0,0,0,0.4);
        color: #fff;
        padding: 5px 10px 3px;   
    }
    .slider:nth-child(1)::before {content: '이미지1';}
    .slider:nth-child(2)::before {content: '이미지2';}
    .slider:nth-child(3)::before {content: '이미지3';}
    .slider:nth-child(4)::before {content: '이미지4';}
    .slider:nth-child(5)::before {content: '이미지5';}
    .slider:nth-child(1)::before {content: '이미지1';}
</style>

<script>
    highlightAll();
    modal();
    tabMenu();
    //slider03
    const sliderWrap = document.querySelector(".slider__wrap");
    const sliderImg = document.querySelector(".slider__img");
    const sliderInner = document.querySelector(".slider__inner");
    const slider = document.querySelectorAll(".slider");

    let currentIndex = -1;
    let sliderCount = slider.length;
    let sliderWidth = sliderImg.offsetWidth;
    let sliderClone = sliderInner.firstElementChild.cloneNode(true);
    sliderInner.appendChild(sliderClone);

    console.log(sliderWidth)
    function slideEffect(){
        currentIndex++
        sliderInner.style.transition = "all 0.3s";
        sliderInner.style.transform = "translateX(-"+ sliderWidth * currentIndex +"px)";

        if(currentIndex == sliderCount){
            setTimeout(()=>{
            sliderInner.style.transform = "translateX(0)";
            sliderInner.style.transition = "all 0s";
            }, 300)
            currentIndex = 0;
        }
    }
    setInterval(slideEffect, 2000);
</script>