Slider Effect 06 - 닷 버튼 추가

    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");         // next,prev 버튼
    const sliderDot = document.querySelector(".slider__dot");         // 닷 버튼
 
 
    let currentIndex = 0;						// 현재 인덱스를 0으로 잡고
    let sliderCount = slider.length;				// 이미지 갯수를 sliderCount로 저장
    let sliderWidth = sliderImg.offsetWidth;		// 이미지 width값을 sliderWidth에 저장
    let dotIndex = "";							// 닷 버튼을 여러개 만들어 주기 위해 변수 doxIndex 선언
    let dotActive;								// 활성화 된 dot을 표현하기 위해 변수 docActive 선언
	
    function init(){
        // 이미지 갯수만큼 닷 버튼 만들기
        // for ( let i=1; i<=sliderCount; i++){
        // sliderDot.innerHTML += "<a href='#' class='dot'></a>"
        // }
        slider.forEach((el) => {							// dotIndex에 이미지 갯수만큼 닷 버튼 만들기
            dotIndex += "<a href='#' class='dot'></a>" 
        });
        sliderDot.innerHTML = dotIndex;
        sliderDot.firstElementChild.classList.add("active")	// 첫번째 자식(첫번째 이미지)에 active 추가
    }
    init();

    function gotoSlider(num){				// gotoSlider 라는 매개변수 함수 선언
        sliderInner.style.transition = "all 400ms";		// transition 효과 0.4초걸리게
        sliderInner.style.transform = "translateX("+ -sliderWidth * num +"px)"		// 움직이는 구간을 translate로 이미지 width값만큼 이동
        currentIndex = num;					// 현재 보여지는 이미지의 번호

        dotActive = document.querySelectorAll(".slider__dot .dot");		// 활성화 된 dot을 표현하기 위해 선언
            
        dotActive.forEach(el => {					// dot 들 중에
            el.classList.remove("active");			// active 클래스를 삭제
        })
        dotActive[num].classList.add("active");		// 현재 보여지는 이미지 번호 = 닷 번호 이므로 active 클래스 추가
    }

    document.querySelectorAll(".slider__btn a").forEach((btn, index) => {		// next,prev 버튼
        btn.addEventListener("click", () => {							// next, prev 버튼을 클릭하면
            let prevIndex = (currentIndex + (sliderCount-1)) % sliderCount	// 0~4만 반복하기 위해 나머지로 표현
            let nextIndex = (currentIndex + 1) % sliderCount				// 0~4만 반복하기 위해 나머지로 표현

            if(btn.classList.contains("prev")){							// 만약 prev 클래스를 포함하면(prev버튼을 클릭하면)
                gotoSlider(prevIndex);								// gotoSlider로 매개변수 전달
            } else {
                gotoSlider(nextIndex);								// gotoSlider로 매개변수 전달
            }
        })  
    })
    document.querySelectorAll(".slider__dot .dot").forEach((dot, index) => {		// dot 버튼
        dot.addEventListener("click", () => {									// dot 버튼을 클릭하면
            gotoSlider(index);													// gotoSlider로 매개변수 전달
        })
    })

전체 사이트 보기