자바스크립트 : 슬라이드 효과 : 버튼, 닷메뉴

자바스크립트 슬라이드 효과 : 버튼, 닷메뉴

자바스크립트의 다양한 효과들 중, CSS의 트랜지션 속성을 활용한 이미지 슬라이드 효과입니다. 이번 유형은 이전 버튼, 다음 버튼을 클릭하면 이전 이미지, 다음 이미지로 슬라이드하는 유형입니다.

---

1. 선택자 및 변수 만들기

const sliderWrap = document.querySelector(".slider__wrap");
const sliderImg = document.querySelector(".slider__img");  // 보여지는 영역
const sliderInner = document.querySelector(".slider__inner");  // 움직이는 영역
const slider = document.querySelectorAll(".slider");  // 개별적 이미지
const sliderDot = document.querySelector(".slider__dot");  // dot

let currentIndex = 0;  // 현재 이미지
let sliderCount = slider.length;  // 이미지 개수
let sliderWidth = sliderImg.offsetWidth;  // 이미지 가로값
let dotIndex = "";

먼저, 선택자와 변수를 만들어 줍니다.

2. dot 만들기

<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">이미지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>

이번 작업의 HTML 소스 중 일부입니다. 슬라이드의 위치를 표시할 dot을 스크립트로 작업해줄 예정입니다.

function init(){
    slider.forEach(() => {dotIndex += "<a href='#' class='dot'>이미지1</a>"})
    sliderDot.innerHTML = dotIndex;
    sliderDot.firstChild.classList.add("active");
}
init();

init() 함수 안에서 dot을 만들어 봅시다. dotIndex라는 빈 문자열 안에 dot을 이미지 개수만큼 추가해 주고, sliderDot(.slider__dot)에 출력해 줍니다.
첫 번째 dot에는 active 클래스를 추가해 주었습니다.

3. 이미지 슬라이드 구현하기

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

    const dotActive = document.querySelectorAll(".slider__dot .dot");
    dotActive.forEach(el => el.classList.remove("active"));
    dotActive[num].classList.add("active");
}

이제, 이미지 슬라이드를 구현할 gotoSlider() 함수를 만들어 줍니다. 한 번 움직일 때 이미지의 가로값만큼 움직일 수 있도록 transform 속성을 추가해 줍니다.
또, 이미지 슬라이드가 움직일 때마다 해당하는 번호의 dot이 활성화되게끔 만들어야 합니다. 먼저, 각각의 dot의 클래스를 모두 삭제한 뒤, 해당 이미지의 dot에만 active 클래스가 추가될 수 있도록 forEach를 사용하여 작업해 주었습니다.

4. 클릭 이벤트

document.querySelectorAll(".slider__btn a").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);
        }
    })
})

각각의 이미지들은 버튼을 클릭했을 때 움직이기 때문에, addEventListener로 클릭 이벤트를 만들어 줍니다. 이전 버튼을 눌렀을 때(prevIndex), 다음 버튼을 눌렀을 때(nextIndex) 각각 변수를 만들어 작업해 주었습니다.

document.querySelectorAll(".slider__dot .dot").forEach((dot, index) => {
    dot.addEventListener("click", () => {
        gotoSlider(index);
    })
})

각각의 dot을 클릭했을 때에도 이미지가 이동하도록 만들어 줍니다. 완성!

---

결과

원본 소스 보기 원본 사이트 보기