sliderEffect06 - 닷버튼 클릭

HTML 구성

    <section id="sliderType06">
        <div class="slider__wrap">
            <div class="slider__img">
                <div class="slider__inner">
                    <div class="slider"><img src="img/images01.jpg" alt="이미지1"></div>
                    <div class="slider"><img src="img/images02.jpg" alt="이미지2"></div>
                    <div class="slider"><img src="img/images03.jpg" alt="이미지3"></div>
                    <div class="slider"><img src="img/images04.jpg" alt="이미지4"></div>
                    <div class="slider"><img src="img/images05.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 태그 넣을 위치-->
            </div>
        </div>
    </section>

JS구성

// 1. 기본 설정
function init(){     // 1-1. 이미지 갯수만큼 dot에 <a></a> 만들어야 함
    slider.forEach(() => {     // slider 안의 이미지 갯수를 가져옴
        dotIndex += `<a href="#" class="dot"></a>`;      // 이미지 갯수만큼 a태그 추가
    })
    sliderDot.innerHTML = dotIndex;     // 추가한 것을 sliderDot에 넣어 줌

    // 1-2. 첫 번째 닷 버튼한테 활성화 표시 (active)
    sliderDot.firstElementChild.classList.add("active");
}
init();

// 2. 슬라이더가 움직일 수 있도록 함
function gotoSlider(num){     // 2-1. gotoSlider 함수에 num 실행
    sliderInner.style.transition = "all 0.4s";     // css 넣어줌
    sliderInner.style.transform = "translateX("+ -sliderWidth * num +"px)";     // css 넣어줌

    currentIndex = num;     // 현재 이미지가 num과 같도록 해줌

    // 2-2. dot의 active를 삭제 및 추가
    dotActive = document.querySelectorAll(".slider__dot .dot");     // dotActive 선언
    
    dotActive.forEach(el => {      // dotActive를 각각 선택
        el.classList.remove("active");     // active를 모두 없애주고
    })
    dotActive[num].classList.add("active");     // 현재 이미지의 순서에 맞는 닷에 active를 추가
}

//3. prev, next 버튼 클릭 시 이동하도록 설계
document.querySelectorAll(".slider__btn a").forEach((btn, index) => {     
    btn.addEventListener("click", () => {     // 버튼 각각의 a링크에 클릭 이벤트 넣어줌

        //누르면 해당 이미지로 변화하도록 함
        let prevIndex = (currentIndex + ( sliderCount - 1 )) % sliderCount;
        let nextIndex = (currentIndex + 1 ) % sliderCount;

        if(btn.classList.contains("prev")){
            gotoSlider(prevIndex);
        } else {
            gotoSlider(nextIndex);
        }
    })
})

//4. 닷 버튼 클릭 시 이동하도록 설계
document.querySelectorAll(".slider__dot .dot").forEach((dot, index) => {
    dot.addEventListener("click", () => {
        gotoSlider(index);
    })
})

링크https://sungilryuu.github.io/webs_class/javascript/effect/sliderEffect06.html