Slider Effect 01

슬라이드 이펙트

이번 시간에는 슬라이드 이펙트 트렌지션 효과에 대해 알아보겠습니다.

---

슬라이드 01

3초마다 중앙의 사진이 변화합니다.

원본 사이트 보기 원본 소스 보기

01. HTML 코드

{
    <main id="main">
    <section id="sliderType01">
        <div class="slider__wrap">
            <div class="slider__img">
                <div class="slider"><img src="../assets/img/effect_bg01-min.jpg" alt="이미지1"></div>
                <div class="slider"><img src="../assets/img/effect_bg02-min.jpg" alt="이미지2"></div>
                <div class="slider"><img src="../assets/img/effect_bg03-min.jpg" alt="이미지3"></div>
                <div class="slider"><img src="../assets/img/effect_bg04-min.jpg" alt="이미지4"></div>
                <div class="slider"><img src="../assets/img/effect_bg05-min.jpg" alt="이미지5"></div>
            </div>
        </div>
    </section>
</main>
} 

02. CSS 코드

{
    /* slider */
        .slider__wrap {
            width: 100%;
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .slider__img {
            position: relative;
            width: 800px;
            height: 600px;
        }
        .slider {
            position: absolute;
            left: 0; 
            top: 0;
        }
        .slider::before {
            position: absolute;
            left: 5px;
            top: 5px;
            background: rgba(0,0,0,0.4);
            color: #fff;
            padding: 5px 10px;
        }
        .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) {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;}

        @media (max-width: 800px){
            .slider__img {
                width: 400px;
                height: 225px;
            }
        }
}

03. Javascript 코드

setInterval 메소드를 이용해서 3초에 한번씩 사진이 변하게 만들어줍니다.

{
    const sliderWrap = document.querySelector(".slider__wrap");
    const sliderImg = sliderWrap.querySelector(".slider__img");
    const slider = sliderWrap.querySelectorAll(".slider");

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

    setInterval(() => {
        let nextIndex = (currentIndex + 1) % sliderCount;       //다음 이미지 
        //1, 2, 3, 4, 5, 6, 7, 8, 9,......
        //1, 2, 3, 4, 0, 1, 2, 3, 4, 0 ......

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

        currentIndex = nextIndex;
    }, 3000);

    // slider[0].style.opacity = "0";  //첫번째 이미지를 안보이게
    // slider[1].style.opacity = "1";  //두번째 이미지를 보이게

    // slider[1].style.opacity = "0";  //두번째 이미지를 안보이게
    // slider[2].style.opacity = "1";  //세번째 이미지를 보이게

    // slider[2].style.opacity = "0";  //세번째 이미지를 안보이게
    // slider[3].style.opacity = "1";  //네번째 이미지를 보이게

    // slider[3].style.opacity = "0";  //네번째 이미지를 안보이게
    // slider[4].style.opacity = "1";  //다섯번째 이미지를 보이게

    // slider[4].style.opacity = "0";  //다섯번째 이미지를 안보이게
    // slider[0].style.opacity = "1";  //첫번째 이미지를 보이게
}