Slider 03

슬라이드 이펙트 03 (좌 : 연속적인 움직임)

이번에는 이미지 슬라이드 형태를 가진 이펙트를 코딩해봤습니다.

HTML

HTML은 기본적인 섹션안에 div 클래스를 잡아줍니다.

코드 보기

    <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/slide01.jpg" alt="이미지1"></div>
                        <div class="slider"><img src="../assets/img/slide02.jpg" alt="이미지2"></div>
                        <div class="slider"><img src="../assets/img/slide03.jpg" alt="이미지3"></div>
                        <div class="slider"><img src="../assets/img/slide04.jpg" alt="이미지4"></div>
                        <div class="slider"><img src="../assets/img/slide05.jpg" alt="이미지5"></div>
                    </div>
                </div>
            </div>
        </section>
    </main>

CSS

css는 기본적인 형태와 스타일을 잡아주지만, 이미지 개개인에 nth-child를 이용해여 개별 구역을 잡아줍니다.
또한, z-index를 사용하여 각 위치를 잡아줍니다.

코드 보기

    /* 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 {
        position: relative;
        width: 400px;
        height: 225px;
        }
    }

script

각 영역을 상수와 변수로 선언해주며, 움직이는 영역인 sliderInner에 스타일을 잡아줍니다.
if문을 사용해 setTimeout를 이용하여 첫 번째 사진에 돌아오도록 하며, setInterval메서드를
이용해 지정해준 n초마다 작동하도록 합니다.

코드 보기

    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)";
        // sliderInner.style.transform = "translateX(-1600px)";
        // sliderInner.style.transform = "translateX(-2400px)";
        // sliderInner.style.transform = "translateX(-3200px)";
        // sliderInner.style.transform = "translateX(-4000px)";
        // sliderInner.style.transform = "translateX(-4800px)";

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

코드 원본 보기