[EFFECT] 슬라이드 효과 04 : 버튼으로 이미지 이동시키기!

이미지 슬라이드 : 버튼을 통해 슬라이드 움직이기 (왼쪽 오른쪽 모두 동작)

이번 시간에는 자동으로 넘어가지 않고 버튼을 클릭했을 때 해당 순서로 이미지가 넘어가도록 구현해보겠습니다! 🥹

---

#1. HTML / CSS 설정하기

! HTML TIP !
각 이미지마다 css설정을 주기 위해 따로 부모를 2번 감싸서 묶어줍니다.
구조는 지난 시간과 똑같으나 slider__img 밑에 형제 요쇼로 버튼 영역을 선언해주었습니다!

✏️ HTML 스크립트 보기

<section id="sliderType04">
    <div class="slider__wrap">
        <div class="slider__img">
            <div class="slider__inner">
                <div class="slider" role="group" aria-label="1/5">
                    <img src="../assets/img/Mountian_bg01.jpg" alt="이미지6">
                </div>
                <div class="slider" role="group" aria-label="2/5">
                    <img src="../assets/img/Mountian_bg02.jpg" alt="이미지7">
                </div>
                <div class="slider" role="group" aria-label="3/5">
                    <img src="../assets/img/Mountian_bg03.jpg" alt="이미지8">
                </div>
                <div class="slider" role="group" aria-label="4/5">
                    <img src="../assets/img/Mountian_bg04.jpg" alt="이미지9">
                </div>
                <div class="slider" role="group" aria-label="5/5">
                    <img src="../assets/img/Mountian_bg05.jpg" alt="이미지10">
                </div>
            </div>
        </div>
        <div class="slider__btn">
            <a href="#" class="prev" role="button" aria-label="왼쪽 이미지">prev</a>
            <a href="#" class="next" role="button" aria-label="오른쪽 이미지">next</a>
        </div>
    </div>
</section>

! CSS TIP !
1. 이미지를 가로로 연결하기 위해 포지션을 relative로 설정하고 영역에서 벗어나는 이미지를 안보이게 처리하기 위해 overflow: hidden을 설정해줍니다.
2. 이미지가 연속적으로 움직일 수 있도록 첫번째 이미지를 6번째에 추가로 넣습니다. (애니메이션 설정은 스크립트 파트에서!!)
3. 마찬가지로 이미지가 6장이기 때문에 inner의 가로 크기를 +하여 4800px로 설정합니다.
4. 지난 시간과 똑같지만 버튼 영역의 스타일만 자유롭게 설정해주면 됩니다.

✏️ CSS 스크립트 보기

/* slider */
.slider__wrap {
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
.slider__img {  /* 이미지가 보이는 영역 */
    position: relative;
    width: 800px;
    height: 450px;
    overflow: hidden;
}
.slider__inner {/* 전체 이미지를 감싸고 있는 부모 : 움직이는 부분 속성주기 */
    display: flex;
    flex-wrap: wrap;
    width: 4800px; /* 총 여섯개의 이미지 */
    height: 450px;
}
.slider {   /* 개별적인 이미지 (각각의 이미지 설정) */
    position: relative;
    width: 800px;
    height: 450px;
}
.slider::before {
    position: absolute;
    left: 5px;
    top: 5px;
    background: rgba(0, 0, 0, 0.4);
    color: #fff;
    padding: 5px 10px;
}
.slider:nth-child(1)::before {content: '이미지6';}
.slider:nth-child(2)::before {content: '이미지7';}
.slider:nth-child(3)::before {content: '이미지8';}
.slider:nth-child(4)::before {content: '이미지9';}
.slider:nth-child(5)::before {content: '이미지10';}
.slider:nth-child(6)::before {content: '이미지6';}

@media(max-width : 800px){
    .slider__img {
        width: 400px;
        height: 250px;
    }
    .slider {
        width: 400px;
        height: 250px;
    }
}

.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.2s;
    display: block;
    color: #fff;
}
.slider__btn a:hover {
    border-radius: 50px;
    background: rgba(38, 52, 103, 0.4);
}
.slider__btn a.prev {
    left: 0;
}
.slider__btn a.next {
    right: 0;
}

---

#2. JAVASCRIPT : 스크립트 짜기

이번 슬라이드 유형에서 포인트는 매개변수 입니다. 매개변수를 어떻게 사용했는지 함께 알아보겠습니다!

💡 전체 스크립트 보기

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; //현재 보이는 이미지 : 마크업 순서대로 0번부터 4번
let sliderCount = slider.length;    //이미지 갯수
let sliderWidth = sliderImg.offsetWidth; //이미지 가로값

//이미지 움직이는 영역
//gotoSlider 함수에 num매개변수를 설정하고 sliderInner 선택자에 에니메이션 속성을 부여한다.
//translateX X축으로 -sliderWidth * num 만큼 영역을 이동하도록 한다. : 여기서 -를 붙은 이유는 왼쪽으로 움직이게 하기 위함!
//왜 매개변수를 쓰는 가? : 이미지의 순서를 바꾸기 위함. (아래의 이벤트 리스너에서 인덱스 값을 추출)
function gotoSlider(num){
    sliderInner.style.transition = "all 400ms";
    sliderInner.style.transform = "translateX("+ -sliderWidth * num +"px)";
    currentIndex = num; // 보이는 이미지가 바뀌도록 설정
}

//완쪽 버튼 클릭
//43210
//sliderCount(이미지 갯수 : 6개) + currentIndex(현재 이미지의 순서 : 4) -1 == 9
// 9 % 5 == 나머지 값은 4이므로 4부터 순서대로 돌아간다.
sliderBtnPrev.addEventListener("click", () => {
    let prevIndex = (sliderCount + currentIndex -1) % sliderCount; //0번이 되었을 때 5%5 ==0이 되므로 계속 해서 반복하는 것.
    gotoSlider(prevIndex);
});

//오른쪽 버튼 클릭
//01234
sliderBtnNext.addEventListener("click", () => {
    let nextIndex = (currentIndex +1) % sliderCount; //5 % 5의 나머지 값이 0이기 때문에 다시 0번째 순서로 넘어가는 것.
    gotoSlider(nextIndex);
});

✏️ 스크립트 보기 : 자바스크립트

! JAVASCRIPT TIP !
1. 스크립트에 필요한 선택자를 설정해주고 현재 보이는 이미지에게 0을 부여하여 첫 순서가 되게 합니다.
2. 다음 이미지가 보이도록 하기 위해 이미지 총 갯수 / 이미지의 가로값을 변수에 저장하여 이미지 가로 * 보여야할 이미지가 되도록 합니다.
3. 각 버튼에게 이벤트리스너를 통해 순서대로 또는 반대 순서로 이동되도록 식을 작성해줍니다.

---

#3. 결과 보기 🎉

원본 소스 보기

원본 페이지 보기