Slider Effect 06 - 이미지 슬라이드의 버튼과 닷메뉴에 대해서 알아보자

설명:

버튼은 페이지의 왼쪽과 오른쪽에 있는 preview 와 next 버튼을 말하고, 닷메뉴는 페이지의 하단에 위치한 다섯 개의 동그란 메뉴를 말합니다.

 

각각의 버튼과 닷메뉴를 누르면, 이미지가 이동하면서 누른 순서와 방향대로 보여집니다.

 

body 의 main 과 script 로 나눠서 보여드리겠습니다.

body 의 main 

 <main id="main">
    <div class="slider__wrap">
        <div class="slider__img">
            <div class="slider__inner">
                <div class="slider s1"><img src="./img/sliderEffect02-min.jpg" alt="이미지6"></div>
                <div class="slider s2"><img src="./img/sliderEffect01-min.jpg" alt="이미지7"></div>
                <div class="slider s3"><img src="./img/sliderEffect03-min.jpg" alt="이미지8"></div>
                <div class="slider s4"><img src="./img/sliderEffect05-min.jpg" alt="이미지9"></div>
                <div class="slider s5"><img src="./img/sliderEffect04-min.jpg" alt="이미지10"></div>
            </div>
        </div>
        <div class="slider__btn">
            <a href="#" class="prev" title="이전이미지">prev</a>
            <a href="#" class="next" title="다음이미지">next</a>
        </div>
        <div class="slider__dot"></div>
    </div>
</main>

각 이미지에 class 를 부여해서 해당하는 순서의 닷메뉴를 누르면, 그 이미지가 보일 수 있도록 했습니다.

script 

//선택자
const sliderWrap = document.querySelector(".slider__wrap");
const sliderImg = sliderWrap.querySelector(".slider__img"); //보여지는 영역
const sliderInner = sliderWrap.querySelector(".slider__inner"); //움직이는 영역
const slider = sliderWrap.querySelectorAll(".slider"); //개별 이미지
const sliderDot = sliderWrap.querySelector(".slider__dot"); // 닷 메뉴
const sliderBtn = sliderWrap.querySelectorAll(".slider__btn a"); // 버튼

let currentIndex = 0; //현재 보이는 이미지, 첫 번째라서 0
let sliderCount = slider.length; //이미지 갯수
let sliderInterval = 2000; //이미지 변경되는 간격 시간
let sliderWidth = slider[0].offsetWidth; //이미지 가로값
let dotIndex = "";

function init(){
    // 이미지 갯수만큼 닷 메뉴 생성
    slider.forEach(() => dotIndex += "<a href='#' class='dot'>이미지</a>");
    sliderDot.innerHTML = dotIndex;

    // 첫 번째 닷 메뉴한테 활성화 표시
    sliderDot.firstChild.classList.add("active");
}
init();

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

    // 닷 메뉴 활성화
    let dotActive = document.querySelectorAll(".slider__dot .dot");
    dotActive.forEach((active) => active.classList.remove("active"));
    dotActive[num].classList.add("active");
}

// 버튼을 클릭했을 때 (addEventListener 를 다중이에 사용하려면 forEach 함수를 써서 사용함)
sliderBtn.forEach((btn, index) => {
    btn.addEventListener("click", () => {
        let prevIndex = (currentIndex+(sliderCount-1)) % sliderCount;
        let nextIndex = (currentIndex+1) % sliderCount; // 1 2 3 4 0 1 2 3 4 

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

// 닷메뉴 클릭했을 때 
const dotNodes = sliderDot.querySelectorAll(".dot");
    dotNodes.forEach((dot, index) => {
    dot.addEventListener("click", () => {
        gotoSlider(index);
    });
});

gotoSlider() 함수는 전달된 인덱스 값에 해당하는 슬라이더 이미지와 닷 메뉴를 활성화하는 함수입니다. 이 함수는 다음과 같은 동작을 수행합니다.

현재 보여지는 슬라이더 이미지와 닷 메뉴의 활성화 클래스를 제거합니다.
전달된 인덱스 값에 해당하는 슬라이더 이미지와 닷 메뉴를 활성화합니다.

슬라이더 이미지와 닷 메뉴를 이동할 위치를 계산하고, 해당 위치로 이동시킵니다.
현재 인덱스 값을 업데이트합니다.

다음은 gotoSlider() 함수의 구현 예시입니다.

function gotoSlider(index) {
  const activeSlider = sliderWrap.querySelector(".slider.active");
  const activeDot = sliderWrap.querySelector(".dot.active");
  activeSlider.classList.remove("active");
  activeDot.classList.remove("active");

  const newSlider = sliderWrap.querySelector(`.slider.s${index + 1}`);
  const newDot = sliderWrap.querySelector(`.dot.d${index + 1}`);
  newSlider.classList.add("active");
  newDot.classList.add("active");

  const offset = -sliderWidth * index;
  sliderInner.style.transform = `translateX(${offset}px)`;

  currentIndex = index;
}

이 함수를 사용하려면, 예를 들어 3번째 슬라이더를 보여주고 싶다면 다음과 같이 호출합니다.

gotoSlider(2); // 0번째부터 시작하므로 3번째 슬라이더의 인덱스는 2입니다.