prev next

JavaScript Slider Effect05

이미지 슬라이드 - 이전 버튼 / 다음 버튼 추가


    <main>
        <section id="sliderType03">
            <div class="slider__wrap">
                <div class="slider__img">
                    <div class="slider__inner">
                        <div class="slider"><img src="img/img03.jpg" alt="이미지1"></div>
                        <div class="slider"><img src="img/img04.jpg" alt="이미지2"></div>
                        <div class="slider"><img src="img/img05.jpg" alt="이미지3"></div>
                        <div class="slider"><img src="img/img06.jpg" alt="이미지4"></div>
                        <div class="slider"><img src="img/img07.jpg" alt="이미지5"></div>
                    </div>
                </div>
                <div class="slider__btn">
                    <a href="#" class="prev">prev</a>
                    <a href="#" class="next">next</a>
                </div>
            </div>
        </section>
        </main>


    .slider__wrap {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100vh;
    }

    .slider__img {              /*화면이 보이는 구간*/
        position: relative;
        width: 800px;
        height: 480px;
        overflow: hidden; 
    }

    .slider__img .slider {
        width: 800px;
        position: relative;
    }
    
    .slider__inner {            /*이미지가 움직이는 영역*/
        display: flex;
        width: 4800px;          /* 전체 이미지의 길이*/
        transform: translateX(0);  
        
    }

    .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(6)::before {
        content: '이미지6';
    }

    .slider__btn a {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 100;
        width: 50px;
        height: 50px;
        background: rgba(0, 0, 0, 0.4);
        line-height: 50px;
        transition: all 0.2s;
        display: block;
        color: #fff;
        text-decoration: none;
        text-align: center;
    }

    .slider__btn a.prev {
        left: 0;
    }

    .slider__btn a.next {
        right: 0;
    }
    
    .slider__btn a:hover {
        background: rgb(241, 96, 86);
    }


    const sliderWrap = document.querySelector(".slider__wrap");         // 이미지 영역을 감싸는 전체 영역
    const sliderImg = document.querySelector(".slider__img");           // 이미지가 보이는 영역
    const sliderInner = document.querySelector(".slider__inner");       // 이미지를 움직이게 하는 영역
    const slider = document.querySelectorAll(".slider");                // 5개의 이미지
    const sliderBtn = document.querySelector(".slider__btn");           // 이미지 아래의 버튼(클릭하면 해당 이미지로 이동)
    const sliderBtnPrev = sliderBtn.querySelector(".prev"); // 이전 이미지 버튼 (const sliderBtnPrev = document.querySelector("slider__btn .prev");
    const sliderBtnNext = sliderBtn.querySelector(".next"); // 다음 이미지 버튼

    let currentIndex = 0;                               // 현재 이미지가 저장된 인덱스
    let sliderCount = slider.length;                    // 이미지가 저장된 배열 길이
    let sliderWidth = sliderImg.offsetWidth;            // 이미지의 가로 길이

    function gotoSlider(num) {                          // 보여지는 화면을 가로로 이동하는 함수
        sliderInner.style.transition = "all 400ms";     // 400ms(4s)만큼 이동을 지연시킨다
        sliderInner.style.transform = "translateX("+ -sliderWidth * num + "px)";  // 이미지의 가로 길이만큼 왼쪽으로 이동
    }

    sliderBtnPrev.addEventListener("click", () => {     // prev 버튼에 대한 이벤트
        // 첫번째 이미지가 있을때 0을 4로
        if(currentIndex == 0) {                         // 이미지 0으로 갔을 때 한번더 클릭하면 마지막 이미지로 이동
            currentIndex = 5;                           // --currentIndex이기 때문에 5 
        }
        gotoSlider(--currentIndex);                     // 현재 인덱스를 처리하기 전에 감소
    });

    sliderBtnNext.addEventListener("click", () => {     // next 버튼에 대한 이벤트
        // 이미지 총 개수 이상 넘어가면 안됨
        if(currentIndex >= sliderCount - 1) {           // 4번째 이미지를 넘어가면 안되기 때문에 sliderCount에 1을 뺌
            currentIndex = -1;                          // ++currentIndex이기 때문에 -1 대입 -> 0
        }
        gotoSlider(++currentIndex);                     // 현재 인덱스를 처리하기 전에 증가
        
    });