이펙트 응용편 - 슬라이더 이펙트 네번째

이미지 버튼클릭으로 움직이기

이번 슬라이더 이펙트는 버튼 클릭식 이동하는 이펙트를 만들었습니다.

JS 설명

gotoSlider 라는 함수를 만들어서 움직이게 만듭니다.
왼쪽,오른쪽 이벤트 리스너를 만들어 각 요소의 조건을 걸어
gotoSlider() 함수에 prevIndex 매개변수값을 넣습니다.
그렇게 되면 버튼이 클릭될때마다 자동적으로 변하게됩니다.

코드 보기

function gotoSlider(num) {
    sliderInner.style.transition = "all 400ms";
    sliderInner.style.transform = "translateX(" + -sliderWidth * num + "px)";
    currentIndex = num;
}
sliderBtnPrev.addEventListener("click", () => {
    let prevIndex = (currentIndex + sliderCount - 1) % sliderCount;
    // let prevIndex = currentIndex - 1;
    // if (prevIndex < 0) {
    //     prevIndex = sliderCount - 1;
    // }
    gotoSlider(prevIndex);
});

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

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