sliderEffect05 - 버튼 클릭

HTML 구성

<section id="sliderType05">
    <div class="slider__wrap">
        <div class="slider__img">
            <div class="slider__inner">
                <div class="slider"><img src="img/images01.jpg" alt="이미지1"></div>
                <div class="slider"><img src="img/images02.jpg" alt="이미지2"></div>
                <div class="slider"><img src="img/images03.jpg" alt="이미지3"></div>
                <div class="slider"><img src="img/images04.jpg" alt="이미지4"></div>
                <div class="slider"><img src="img/images05.jpg" alt="이미지5"></div>
            </div>
        </div>
        
        <div class="slider__btn">
            <a href="#" class="prev">prev</a>
            <a href="#" class="next">next</a>
        </div>
    </div>
</section>

JS 구성

function gotoSlider(num){     // gotoSlider 함수에 num 실행 
    sliderInner.style.transition = "all 0.4s";     // css에 transition 추가
    sliderInner.style.transform = "translateX("+ -sliderWidth * num +"px)";     // css에 transform 추가

    currentIndex = num;     // currentIndex와 num 값이 같도록 함
}

sliderBtnPrev.addEventListener("click", () => {     // 이전으로 가는 버튼을 눌렀을 때의 이벤트 설정
    let prevIndex = (currentIndex + (sliderCount - 1) ) % sliderCount;     // 나머지를 이용하여 이전 위치 값 설정
    gotoSlider(prevIndex);     // gotoSlider에 prevIndex값을 넣어서 실행
})

sliderBtnNext.addEventListener("click", () => {     // 다음으로 가는 버튼을 눌렀을 때의 이벤트 설정
    let nextIndex = (currentIndex + 1) % sliderCount;     // 나머지를 이용하여 다음 위치 값 설정
    gotoSlider(nextIndex);     // gotoSlider에 nextIndex값을 넣어서 실행
})

나의 JS 방식(if 활용)

sliderBtnPrev.addEventListener("click", () => {
    if(currentIndex!=0){
        let down = currentIndex -1;
        currentIndex--;
        gotoSlider(down);
    }
})

sliderBtnNext.addEventListener("click", () => {
    if(currentIndex!=4){
        let up = currentIndex + 1;
        currentIndex++;
    gotoSlider(up);
    }
})

선생님의 방식이 더 좋은 것 같다

 

링크https://sungilryuu.github.io/webs_class/javascript/effect/sliderEffect05.html