슬라이드 이펙트 04

슬라이드 이펙트

자바스크립트를 이용한 슬라이드 효과 만들기 입니다.

---

슬라이드 이펙트 04 - 이미지 슬라이드 버튼

이미지 내에 있는 버튼을 클릭 시 이미지가 좌/우로 이동하는 슬라이드 효과입니다.

---

1. 좌/우 버튼 만들기

클릭 시 이미자가 좌/우로 이동할 수 있도록 좌측과 우측에 각각 버튼을 만들어 줍니다. 기본적인 코드는 슬라이드 이펙트 03와 같으며 버튼이 추가되었습니다.

소스보기

-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/img/effect_bg16-min.jpg" alt="이미지1"></div>
                    <div class="slider" role="group" aria-label="2/5"><img src="../assets/img/effect_bg17-min.jpg" alt="이미지2"></div>
                    <div class="slider" role="group" aria-label="3/5"><img src="../assets/img/effect_bg18-min.jpg" alt="이미지3"></div>
                    <div class="slider" role="group" aria-label="4/5"><img src="../assets/img/effect_bg19-min.jpg" alt="이미지4"></div>
                    <div class="slider" role="group" aria-label="5/5"><img src="../assets/img/effect_bg20-min.jpg" alt="이미지5"></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>
</main>

-슬라이드 버튼 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.2s;
    display: block;
    color: #fff;
}
.slider__btn a:hover {
    border-radius: 50%;
    background: rgb(173, 81, 27);
}
.slider__btn a.prev {
    left: 20px;
}
.slider__btn a.next {
    right: 20px;
}

2. 버튼 스크립트

버튼 클릭 시 이미지가 이동하도록 스크립트를 작성합니다.

소스보기

-자바스크립트 파트-
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;
}

//왼쪽 버튼 클릭
sliderBtnPrev.addEventListener("click", () => {
    let prevIndex = currentIndex - 1;
    if(prevIndex == -1){
        prevIndex = 4;
    }
    gotoSlider(prevIndex);
});

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

함수로 슬라이드가 현재 이미지 순서를 나타내는 currentIndex와 이미지의 가로값을 나타내는 sliderWidth를 곱해 그 위치의 픽셀만큼 이동하도록 합니다.

addEventListener( )를 이용해 좌측 버튼을 클릭 시 현재 이미지 순서에 -1를 하고 우측 버튼을 클릭시 +1을 합니다.
이 때 카운트 변수인 prevIndex가 -0이 될 때 -1을 더 추가하면 4가 되서 맨 끝 이미지로 이동해야 하기 때문에 if문을 사용해 4가 되도록 합니다.

우측 버튼은 currentIndex + 1을 할 때 0~4의 숫자가 계속 반복하도록 현재 총 이미지 갯수인 5를 나눈 몫을 변수로 만듭니다.

3. 공식 추가

위의 스크립트는 이미를 5개일 경우를 가정하고 작성했지만 이미지의 갯수가 유동적으로 변할 때 자동으로 적용되도록 5 대신 공식으로 바꿔 넣습니다.

소스보기

-자바스크립트 버튼-
let sliderCount = slider.length;            //이미지 갯수

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

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

현재 이미지의 순서 수를 5 대신 전체 이미지의 갯수를 나타낸 변수 sliderCount로 나눈 몫으로 변수를 설정하면 이미지의 수가 몇이건 자동으로 적용이 됩니다.

좌측 버튼의 경우 0에서 -1이 아닌 4가 될 수 있도록 현재 이미지 순서 + (전체 이미지 수 - 1)을 전체 이미지 수로 나눈 몫으로 변수를 정해야 합니다.
또는 위의 if문에서 prevIndex = sliderCount-1로 바꿔 설정하는 방법도 있습니다.

원본 소스 보기