prev next

JavaScript Slider Effect06

이미지 슬라이드 - 닷 버튼 추가

//slider06
    <section id="slideType06">
        <div class="slider__wrap">
            <div class="slider__img">
                <div class="slider__inner">
                    <div class="slider"><img src="img/slide06.jpg" alt="이미지1"></div>
                    <div class="slider"><img src="img/slide07.jpg" alt="이미지2"></div>
                    <div class="slider"><img src="img/slide08.jpg" alt="이미지3"></div>
                    <div class="slider"><img src="img/slide09.jpg" alt="이미지4"></div>
                    <div class="slider"><img src="img/slide10.jpg" alt="이미지5"></div>
                </div>
            </div>
            <div class="slider__btn">
                <a href="#" class="prev">prev</a>
                <a href="#" class="next">next</a>
            </div>
            <div class="slider__dot">
                <!-- <a href="#" class="dot active"></a>
                <a href="#" class="dot"></a>
                <a href="#" class="dot"></a>
                <a href="#" class="dot"></a>
                <a href="#" class="dot"></a> -->
            </div>
        </div>
    </section>

/* slider */
    .slider__wrap {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100vh;
    }
    .slider__img {               /* 화면 보이는 구간 */
        width: 800px;
        height: 480px;
        overflow: hidden;
    }
    .slider__inner {            /* 이미지 움직이는 영역 */
        display: flex;
        width: 4800px;          /* 이미지 총 길이 */
        transform: translateX(0);
    }
    .slider {
        width: 800px;
        position: relative;
    }
    .slider::before {
        position: absolute;
        left: 5px;
        top: 5px;
        background: rgba(0,0,0,0.4);
        color: #fff;
        padding: 3px 10px 5px;
    }
    .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__btn a {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 100;
        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;
        text-decoration: none;
    }
    .slider__btn a.prev {
        left: 0;
    }
    .slider__btn a.next {
        right: 0;
    }
    .slider__btn a:hover {
        background: rgb(241, 96, 86);
    }
    .slider__dot {
        position: absolute;
        left: 50%;
        bottom: 20%;
        transform: translateX(-50%);
    }
    .slider__dot .dot {
        width: 20px;
        height: 20px;
        background: rgba(0,0,0,0.4);
        display: inline-block;
        border-radius: 50%;
        transition: all 0.3s;
        margin: 3px;
    }
    .slider__dot .dot.active {
        background: rgba(255,255,255,0.9);
    }

//slider06
    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 sliderDot = document.querySelector(".slider__dot");
    
    let currentIndex = 0;
    let sliderCount = slider.length;
    let sliderWidth = sliderImg.offsetWidth;
    let dotIndex = "";
    let dotActive;

    function init(){                        //시작 하자마자 실행(초기화 할때 사용)
        slider.forEach(() => {
            dotIndex += "";
        })
        sliderDot.innerHTML = dotIndex;

        sliderDot.firstElementChild.classList.add("active");
    }
    init();

    function gotoSlider(num){                                  //이미지의 인덱스 값
        sliderInner.style.transition = "all 400ms";                  
        sliderInner.style.transform = "translateX("+ -sliderWidth * num +"px)";
        currentIndex = num;                                    //현재의 값
        
        dotActive = document.querySelectorAll(".slider__dot .dot");
        dotActive.forEach(el => {
            el.classList.remove("active");                     //.active클래스를 지워줌
        })
        dotActive[num].classList.add("active");                //현재 인덱스 값만 .active클래스를 추가
    };

    document.querySelectorAll(".slider__btn a").forEach((btn, index) => {
        btn.addEventListener("click", () => {

            let prevIndex = (currentIndex + (sliderCount - 1)) % sliderCount; //prevIndex는 - 1 씩 감소
            let nextIndex = (currentIndex + 1) % sliderCount;                 //nextIndex는 + 1 씩 증가
            
            if(btn.classList.contains("prev")){             //만약 버튼을 눌렀을 때 ".prev"가 있으면
                gotoSlider(prevIndex)                       //gotoSlider(prevIndex)를 실행
            } else {                                        //버튼을 눌렀을 때 ".prev"가 없으면
                gotoSlider(nextIndex)                       //gotoSlider(nextIndex)를 실행
            };
        });
    });
    //닷 버튼을 클릭했을 때 해당 이미지로 이동
    document.querySelectorAll(".slider__dot .dot").forEach((dot, index) => {      //닷 버튼을 눌렀을 때
        dot.addEventListener("click", () => {
            gotoSlider(index)                               //이미지의 인덱스 값으로 넘어감
        });
    });