Slider Effect 03

슬라이드 이펙트

이번 시간에는 슬라이드 이펙트 좌로 움직이기(연속) 효과에 대해 알아보겠습니다.

---

슬라이드 03

2초마다 중앙의 사진이 왼쪽으로 이동합니다.

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

01. HTML 코드

{
    <main id="main">
    <section id="sliderType03">
        <div class="slider__wrap">
            <div class="slider__img">
                <div class="slider__inner">
                    <div class="slider"><img src="../assets/img/effect_bg03-min.jpg" alt="이미지1"></div>
                    <div class="slider"><img src="../assets/img/effect_bg04-min.jpg" alt="이미지2"></div>
                    <div class="slider"><img src="../assets/img/effect_bg05-min.jpg" alt="이미지3"></div>
                    <div class="slider"><img src="../assets/img/effect_bg06-min.jpg" alt="이미지4"></div>
                    <div class="slider"><img src="../assets/img/effect_bg07-min.jpg" alt="이미지5"></div>
                </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: 450px;
        overflow: hidden;
    }
    .slider__inner {        /* 이미지를 감싸고 있는 부모 : 움직이는 부분 */
        display: flex;
        flex-wrap: wrap;
        width: 4800px;      /* 총 이미지 6개 */
        height: 450px;
    }
    .slider {           /* 개별적인 이미지 */
        position: relative;
        width: 800px;
        height: 450px;
    }
    .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(6)::before {content: '이미지1';}

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

03. script 코드

setInterval 메소드를 이용해서 2초에 한번씩 사진이 왼쪽으로 미끄러지듯이 이동하게 만들어 줍니다.
슬라이드 2번과 다른점은 사진이 마지막 이미지(5번)에 도착했을 때 1번 이미지를 복사해서 넣어줍니다.
여기에 setTimeout을 사용해서 빠르게 넘겨주면 자연스럽게 왼쪽으로 이동하는 연속이미지가 완성됩니다.

{
    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 = 0;                                               //현재 보이는 이미지
    let sliderCount = slider.length;                                    //이미지 갯수
    let sliderWidth = sliderImg.offsetWidth;                            //이미지 가로값
    let sliderClone = sliderInner.firstElementChild.cloneNode(true);    //첫번째 이미지 복사
    sliderInner.appendChild(sliderClone);                               //첫번째 이미지를 마지막에 넣어줌

    function sliderEffect(){
        currentIndex++;
        sliderInner.style.transition = "all 0.6s";
        sliderInner.style.transform= "translateX(-"+ sliderWidth * currentIndex +"px)";

        // sliderInner.style.transform= "translateX(-800px)";   800 * 1
        // sliderInner.style.transform= "translateX(-1600px)";  800 * 2
        // sliderInner.style.transform= "translateX(-2400px)";  800 * 3
        // sliderInner.style.transform= "translateX(-3200px)";  800 * 4
        // sliderInner.style.transform= "translateX(-4000px)";  800 * 5
        // sliderInner.style.transform= "translateX(-4800px)";  800 * 6

        // 마지막 사진에 위치 했을 때 
        if(currentIndex == sliderCount){
            setTimeout(() => {
                sliderInner.style.transition = "0s";
                sliderInner.style.transform = "translateX(0px)";
            }, 700);
            
            currentIndex = 0;
        }
    }
    setInterval(sliderEffect, 2000);
}