Slider Effect01 - jquery

이미지 슬라이드 - 페이드 효과

<!-- contents -->
<main>
    <div class="slider-wrap">
        <div class="slider-img">
            <div class="slider" data-name="이미지1">
                <img src="../assets/img/bg11.jpg" alt="이미지1">
            </div>
            <div class="slider" data-name="이미지2">
                <img src="../assets/img/bg12.jpg" alt="이미지2">
            </div>
            <div class="slider" data-name="이미지3">
                <img src="../assets/img/bg13.jpg" alt="이미지3">
            </div>
            <div class="slider" data-name="이미지4">
                <img src="../assets/img/bg14.jpg" alt="이미지4">
            </div>
            <div class="slider" data-name="이미지5">
                <img src="../assets/img/bg15.jpg" alt="이미지5">
            </div>
        </div>
    </div>
</main>
<!-- //contents -->

/* slider */
.slider-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
}
.slider-img {
    position: relative;
    width: 800px;
    height: 480px;
}
.slider-img img {
    width: 100%;
}
.slider {
    position: absolute;
    left: 0;
    top: 0;
}
.slider::before {
    position: absolute;
    left: 5px;
    top: 5px;
    background: rgba(0,0,0,.4);
    color: #fff;
    padding: 5px 10px 3px;
    font-family: 'NEXONLv1Gothic';
}
.slider:nth-child(1) {
    z-index: 5;
}
.slider:nth-child(2) {
    z-index: 4;
}
.slider:nth-child(3) {
    z-index: 3;
}
.slider:nth-child(4) {
    z-index: 2;
}
.slider:nth-child(5) {
    z-index: 1;
}
.slider::before {
    content: attr(data-name);
}

const sliderWrap = $(".slider-wrap");
const sliderImg = $(".slider-img");
const slider = $(".slider");

let currentIndex = 0 ;                  // 현재 보이는 이미지(첫번째 이미지)
let sliderCount = slider.length;        // 이미지 갯수 구하기

setInterval(function(){
    let nextIndex = (currentIndex + 1) % sliderCount;
    
    slider.eq(currentIndex).fadeOut();                // 현재 보이는 이미지를 사라지게 해준다
    slider.eq(nextIndex).fadeIn();                // 다음 이미지를 나타나게 해준다

    currentIndex = nextIndex;

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

    // slider.eq(0).hide();                // 현재 보이는 이미지를 사라지게 해준다
    // slider.eq(1).show();                // 다음 이미지를 나타나게 해준다

    // slider.eq(1).hide();                // 현재 보이는 이미지를 사라지게 해준다
    // slider.eq(2).show();                // 다음 이미지를 나타나게 해준다

    // slider.eq(2).hide();                // 현재 보이는 이미지를 사라지게 해준다
    // slider.eq(3).show();                // 다음 이미지를 나타나게 해준다

    // slider.eq(3).hide();                // 현재 보이는 이미지를 사라지게 해준다
    // slider.eq(4).show();                // 다음 이미지를 나타나게 해준다

    // slider.eq(4).hide();                // 현재 보이는 이미지를 사라지게 해준다
    // slider.eq(0).show();                // 다음 이미지를 나타나게 해준다

    // slider.eq(0).hide();                // 현재 보이는 이미지를 사라지게 해준다
    // slider.eq(1).show();                // 다음 이미지를 나타나게 해준다
    // 0 1 2 3 4 0 1 2 3 4
    
}, 2000);