슬라이드 이펙트_04 : 이전/다음 버튼을 통해 슬라이드를 구현해봅시다 👀

슬라이드 이펙트_04 : 왼쪽 오른쪽 슬라이드 넘기기 만들어보기

이번에는 왼쪽/오른쪽 버튼을 누르면 각각 그에맞게 슬라이드 되는 슬라이드 이펙트 예제_04를 구현해보도록 하겠습니다.

---

HTML 코드 : 간단한 예제용

간단한 예제를 구현하기 위해 하단과 같이 작성합니다.
편의상 푸터를 제외한 핵심 요소만 적어두겠습니다.

<main id="main">
    <section id="sliderType01">
        <div class="slider__wrap">
            <div class="slider__img">
                <div class="slider__inner">
                    <div class="slider" role="group" aria-label="1/5"><img src="../../assets/slider/effect_img_01@2x.jpg" alt="이미지1"></div>
                    <div class="slider" role="group" aria-label="2/5"><img src="../../assets/slider/effect_img_02@2x.jpg" alt="이미지2"></div>
                    <div class="slider" role="group" aria-label="3/5"><img src="../../assets/slider/effect_img_03@2x.jpg" alt="이미지3"></div>
                    <div class="slider" role="group" aria-label="4/5"><img src="../../assets/slider/effect_img_04@2x.jpg" alt="이미지4"></div>
                    <div class="slider" role="group" aria-label="5/5"><img src="../../assets/slider/effect_img_05@2x.jpg" alt="이미지5"></div>
                    <!-- <div class="slider"><img src="../../assets/slider/effect_img_06@2x.jpg" alt="이미지5"></div> -->
                </div>
            </div>
            <div class="slider__btn">
                <a href="#" class="prev" role="button" aria-lable="왼쪽 이미지">prev</a>
                <a href="#" class="next" role="button" aria-lable="오른쪽 이미지">next</a>
            </div>
        </div>
    </section>
</main>

CSS 코드 : prev / next 구현

각각 이전/다음 버튼을 구현하기 위해 하단과 같이 CSS를 작성합니다.

.slider__btn a {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    background: rgba(0,0,0,0.4);
    text-align: center;
    line-height: 50px;
    transition: all 0.25s;
    display: block;
    color: #fff;
}
.slider__btn a:hover{
    background: rgb(38, 93, 133);
}
.slider__btn a.prev {
    left: 0;
}
.slider__btn a.next {
    right: 0;
}

---

JS코드 : 버튼 누를시 이벤트 발생

1. 이전과 다음 둘 중 하나를 클릭할시 이벤트가 발생합니다. 2. 예를 들어 이전을 클릭할시 (currentIndex(현재 이미지)+sliderCount(이미지 총 갯수)-1)/sliderCount(이미지 총 갯수)를 계산해
이전을 클릭했을때 나올 이미지 번호를 nextIndex에 저장합니다. 3. 'nextIndex'를 통해 이전을 클릭했을때 나올 이미지의 번호를 gotoslider로 보내게 되고
-sliderWidth(이미지 가로값)*num(nextIndex) 값 만큼 transform을 이용해 4. slideInner를 움직여 슬라이드 효과를 구현합니다.

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 = sliderBtn.querySelector(".prev")             //왼쪽 버튼 
const sliderBtnNext = sliderBtn.querySelector(".next")             //오른쪽 버튼 

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

//2. 각 버튼이 눌린값을 토대로 transform을 이용해 이동
function gotoSlider(num){
    sliderInner.style.transition = "all 400ms";
    sliderInner.style.transform = "translateX("+ -sliderWidth*num+"px)";
    currentIndex = num;
};

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

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

완성!

세상에 이전을 누르면 이전 이미지가 나오고
다음을 누르면 다음 이미지가 나오다니 너무 획기적이지 않나요? ♪( 'ω' و(و"