[JavaScript] JQuery로 슬라이드 만들기(feat. 무한 loop)

라이브러리를 사용하지 않고 자바스크립트만으로 슬라이드를 만들어보려고 한다.

🕹️ JavaScript

슬라이드 length 가져오기

const slideCount = $(".slide-item").length; // 5

현재 index 설정

let currentIdx = 1;

다음 버튼 동작 설정

무한 loop 동작을 위해 전체 슬라이드 count보다 값이 클 경우에는 index 값을 다시 처음의 값 1으로 설정한다.

$(".next-btn").click(function () {
  	// 현재 index에 1을 더한다
  	// -> 더한 값이 전체 슬라이드 count보다 크면 1을, 그렇지 않다면 1을 더한 값을 넣어준다.
    currentIdx = currentIdx + 1 > slideCount ? 1 : currentIdx + 1;

    setSlide(currentIdx);
});

이전 버튼 동작 설정

역시 무한 loop 동작을 위해 뺀 값이 1보다 작을 경우에는 전체 슬라이드 count 값을 넣어준다.

$(".prev-btn").click(function () {
  	// 현재 index에 1을 뺀다
  	// -> 뺀 값이 1보다 작을 경우에는 SlideCount를, 그렇지 않다면 1을 뺀 값을 넣어준다.
    currentIdx = currentIdx - 1 < 1 ? slideCount : currentIdx - 1;

    setSlide(currentIdx);
});

슬라이드 위치 설정

이전/다음 버튼을 클릭했을 때 이전 슬라이드(prev)는 왼쪽으로, 다음 슬라이드(next)는 오른쪽으로 이동하도록 슬라이드의 위치를 설정한다.

예시)

function setSlide(currentIdx) {
    $(".slide-item").removeClass("prev next current");
    let prevIdx = currentIdx - 1 < 1 ? slideCount : currentIdx - 1;
    let nextIdx = currentIdx + 1 > slideCount ? 1 : currentIdx + 1;

    $(`.slide-item${prevIdx}`).addClass("prev"); // 이전 슬라이드
    $(`.slide-item${currentIdx}`).addClass("current"); // 현재 슬라이드
    $(`.slide-item${nextIdx}`).addClass("next"); // 다음 슬라이드
}

🎨 CSS

css로 이전 슬라이드, 다음 슬라이드, 현재 슬라이드의 위치를 설정한다.

/* 자연스러운 움직임을 위해 transition 설정 */
.slide-wrapper .slide .slide-item { display: flex; justify-content: center; align-items: center; position: absolute; top: 50%; left: 50%; width: 500px; height: 500px; font-size: 24px; color: #fff; font-weight: 600; transform: translate(150%, -50%); transition: all 0.3s; }
/* 이전 슬라이드(.prev) x축 기준으로 왼쪽으로 이동 */
.slide-wrapper .slide .slide-item.prev { transform: translate(-150%, -50%); visibility: hidden; opacity: 0; }
/* 다음 슬라이드(.next) x축 기준 오른쪽으로 이동 */
.slide-wrapper .slide .slide-item.next { transform: translate(150%, -50%); }
/* 현재 슬라이드(.current) 정가운데 위치하도록 설정 */
.slide-wrapper .slide .slide-item.current { transform: translate(-50%, -50%); }

💡 추가 Tip
loop를 한 바퀴 돌아 다시 슬라이드 1번부터 시작할 때 prev 슬라이드의 경우 초기 위치로 다시 돌아가는 어색한 움직임이 보여 .prev 클래스에만 visibility: hidden;과 opacity: 0;를 설정해주었다.

👉 전체 코드