sliderEffect04

sliderEffect04 - 버튼

네번째 슬라이드 이펙트 - 버튼으로 다음/이전 이미지로 넘어가도록 하였습니다.

---

참고

슬라이드 이펙트 04 페이지 우측하단 소스 보기를 클릭하시면 JAVASCRIPT, HTML, CSS를 확인할 수 있습니다.

원본 소스 보기 메인 페이지 보기

JAVASCRIPT

사용할 변수를 선언합니다. 이미지가 좌/우로 넘어갈 때 애니메이션 효과를 주었으며, 먼저 선언한 sliderWidth = 이미지의 가로값px만큼 이동하게 합니다.
prev 버튼과 next 버튼에 이벤트를 주면 끝입니다.
(prev 버튼에는 현재이미지 + (이미지 개수 - 1) % 이미지 개수를 통하여 이전 이미지로 넘어가도록)
(next 버튼에는 현재이미지 + 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 sliderBtn = document.querySelector(".slider__btn");    // 버튼
const sliderBtnPrev = document.querySelector(".prev");    // 왼쪽버튼
const sliderBtnNext = document.querySelector(".next");    // 오른쪽버튼

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

// 이미지 움직이는 영역
function gotoSlider(num) {
    sliderInner.style.transition = "all 400ms";
    sliderInner.style.transform = "translateX(" + -sliderWidth * num + "px)";
    currentIndex = num;
    // console.log(currentIndex)
}

// 왼쪽 버튼 클릭
sliderBtnPrev.addEventListener("click", () => {
    let prevIndex = (currentIndex + (sliderCount - 1)) % sliderCount;

    gotoSlider(prevIndex);
    // if (prevIndex > 0) {
    //     gotoSlider(4);
    // }
});

// 오른쪽 버튼 클릭
sliderBtnNext.addEventListener("click", () => {
    let nextIndex = (currentIndex + 1) % sliderCount;
    gotoSlider(nextIndex);
    // 0 1 2 3 4
});