슬라이드 이펙트 04

슬라이드 이펙트04

이번 이미지는 자동 슬라이드가 아닌 버튼을 클릭하는 구조입니다.

원본 소스 보기

원본 페이지 보기

---

HTML

<section id="sliderType01">
    <div class="slider__wrap">
        <div class="slider__img">
            <div class="slider__inner">
                <div class="slider"><img src="../assets/img3/effect_bg11-min.jpg" alt="이미지"></div>
                <div class="slider"><img src="../assets/img3/effect_bg12-min.jpg" alt="이미지"></div>
                <div class="slider"><img src="../assets/img3/effect_bg13-min.jpg" alt="이미지"></div>
                <div class="slider"><img src="../assets/img3/effect_bg14-min.jpg" alt="이미지"></div>
                <div class="slider"><img src="../assets/img3/effect_bg15-min.jpg" alt="이미지"></div>
            </div>
        </div>
        <div class="slider__btn">
            <a href="#" class="prev">prev</a>
            <a href="#" class="next">next</a>
        </div>
    </div>
</section>

---

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;
            }
        }

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

        .slider__btn a:hover {
            background: rgb(159, 152, 168);
        }

        .slider__btn a.prev {
            left: 0;
        }

        .slider__btn a.next {
            right: 0;
        }

---

script 소스

 const sliderWrap = document.querySelector(".slider__wrap");
        const sliderImg = document.querySelector(".slider__img");       //보여지는 영역
        const sliderInner = document.querySelector(".slider__inner");   //움직이는 영역
        const slider = document.querySelectorAll(".slider");            //각각 이미지
        const sliderBtn = document.querySelector(".slider__btn");            //버튼
        const sliderBtnPrev = document.querySelector(".prev");            //왼쪽 버튼
        const sliderBtnNext = document.querySelector(".next");            //오른쪽 버튼

        let currentIndex = 0;   //현재 이미지
        let sliderCount = slider.length;    //이미지 갯수
        let sliderWidth = sliderImg.offsetWidth;    //이미지 가로값

        //이미지 움직이는 영역
        function gotoSlider(num) {
            sliderInner.style.transition = "all 400ms";
            sliderInner.style.transform = "translateX(" + -sliderWidth * num + "px)";
            currentIndex = num;
        }

        //왼쪽 버튼 클릭
        sliderBtnPrev.addEventListener("click", () => {
            let prevIndex = (currentIndex -1) % sliderCount;
            if (prevIndex == -1){
                prevIndex = sliderCount-1;
            }
            gotoSlider(prevIndex);
            // 현재값에서 -1 해줌
        });
        // 오른쪽 버튼 클릭
        sliderBtnNext.addEventListener("click", () => {
            let nextIndex = (currentIndex + 1) % sliderCount
            gotoSlider(nextIndex);
            // 0 1 2 3 4 
        });