자바스크립트 슬라이드 효과(6)에 대해 알아보자!

자바스크립트 슬라이드 효과

슬라이드 효과 6

슬라이드 이펙트 중 닷메뉴와 버튼이 있는 효과입니다.

구조

<main id="main">
    <div class="slider__wrap">
        <div class="slider__img">
            <div class="slider__inner">
                <div class="slider s1"><img src="img/sliderEffect01-min.jpg" alt="이미지1"></div>
                <div class="slider s2"><img src="img/sliderEffect03-min.jpg" alt="이미지2"></div>
                <div class="slider s3"><img src="img/sliderEffect04-min.jpg" alt="이미지3"></div>
                <div class="slider s4"><img src="img/sliderEffect08-min.jpg" alt="이미지4"></div>
                <div class="slider s5"><img src="img/sliderEffect05-min.jpg" alt="이미지5"></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">
            <!-- <a href="#" class="active dot">이미지1</a>
            <a href="#" class="dot">이미지2</a>
            <a href="#" class="dot">이미지3</a>
            <a href="#" class="dot">이미지4</a>
            <a href="#" class="dot">이미지5</a> -->
        </div>
    </div>
</main>

버튼과 닷메뉴를 만들어주었습니다.

 

스크립트_선택자

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;                                                   // 현재 보이는 이미지
let sliderCount = slider.length;                                        // 이미지 갯수
let sliderInterval = 2000;                                              // 이미지 변경 간격 시간
let sliderWidth = slider[0].clientWidth;                                // 이미지 가로값 구하기
let dotIndex = "";

스크립트

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

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

init();

이미지 갯수만큼 닷 메뉴를 생성합니다. 이를 위해서, slider라는 변수에 이미지들을 담아둔 배열을 사용합니다. slider.forEach() 메소드를 사용하여 배열을 반복하면서, dotIndex라는 변수에 닷 메뉴를 생성하는 HTML 코드를 추가합니다.

생성된 닷 메뉴를 웹 페이지에 추가합니다. 이를 위해서, sliderDot라는 변수에 닷 메뉴를 추가할 HTML 요소를 참조합니다. 그리고 sliderDot.innerHTML 속성을 사용하여 dotIndex 변수에 저장된 HTML 코드를 sliderDot에 추가합니다.

첫 번째 닷 메뉴에 활성화 표시를 추가합니다. 이를 위해서, sliderDot.firstChild 속성을 사용하여 첫 번째 닷 메뉴를 참조하고, classList.add() 메소드를 사용하여 "active" 클래스를 추가합니다.

 

// 이미지 이동시키기
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");
}

num 매개변수는 슬라이더에서 표시하려는 이미지의 인덱스 번호를 나타냅니다.

sliderInner 요소에 transition 속성을 설정하여, 이미지가 슬라이딩될 때 애니메이션 효과를 추가합니다.

sliderInner 요소에 transform 속성을 설정하여, 이미지 슬라이더의 위치를 변경합니다. translateX 함수를 사용하여, 이미지가 슬라이딩될 때 sliderWidth 변수 값에 따라서 좌우 방향으로 이동합니다.

currentIndex 변수에 num 매개변수의 값을 할당합니다. 이는 현재 보여지는 이미지의 인덱스를 저장하는 변수입니다.

닷 메뉴를 업데이트합니다. document.querySelectorAll() 함수를 사용하여 모든 닷 메뉴를 찾아서, forEach() 메소드를 사용하여 각각의 닷 메뉴에서 "active" 클래스를 제거합니다. 그리고 num 매개변수로 전달된 인덱스의 닷 메뉴에 "active" 클래스를 추가합니다. 이를 통해, 현재 보여지는 이미지에 해당하는 닷 메뉴를 활성화 표시합니다.

// 버튼을 클릭했을 때
sliderBtn.forEach((btn, index) => {
    btn.addEventListener("click", () => {
        let prevIndex = (currentIndex + (sliderCount-1)) % sliderCount;
        let nextIndex = (currentIndex+1) % sliderCount;

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

sliderBtn은 이전/다음 버튼을 담고 있는 배열입니다. forEach() 메소드를 사용하여 배열을 반복하면서, 각각의 버튼에 클릭 이벤트를 추가합니다.

클릭 이벤트가 발생했을 때, 이전 버튼을 눌렀는지, 다음 버튼을 눌렀는지를 확인합니다. 이를 위해서, btn.classList.contains() 함수를 사용하여 버튼이 "prev" 클래스를 가지고 있는지 여부를 확인합니다.

currentIndex 변수는 현재 보여지는 이미지의 인덱스를 저장하는 변수입니다. 이전 버튼을 눌렀을 때, 이전 이미지의 인덱스를 계산하고, 다음 버튼을 눌렀을 때, 다음 이미지의 인덱스를 계산합니다.

계산된 이전/다음 이미지의 인덱스를 gotoSlider() 함수에 전달하여, 해당 이미지를 슬라이더에서 보여줍니다.

// dot 메뉴 클릭했을 때 넘어가기
document.querySelectorAll(".slider__dot .dot").forEach((dot, index) => {
    dot.addEventListener("click", () => {
        gotoSlider(index);
    });
});

document.querySelectorAll(".slider__dot .dot") 함수를 사용하여, 모든 닷 메뉴를 선택합니다.

forEach() 메소드를 사용하여, 각각의 닷 메뉴에 클릭 이벤트를 추가합니다.

클릭 이벤트가 발생했을 때, 클릭된 닷 메뉴의 인덱스를 gotoSlider() 함수에 전달하여, 해당 이미지를 슬라이더에서 보여줍니다.

완성된 페이지와 코드보기

 

코드보기