[JS]관람차 캐러셀 슬라이드 ferris wheel carousel

서울런 홈페이지의 관람차 모양 2D 캐러셀 슬라이드를 구현해보기

 

See the Pen ferris wheel carousel 관람차 캐러셀 슬라이드 by Oh Ikmyeong (@dpffpself) on CodePen.

HTML

<a href="https://slearn.seoul.go.kr/" target="_blank">서울런 카피</a>
<section class="slide-wrap">
    <ul class="slide">
        <li class="slide-item">
            <div class="slide-item-ctnt">01</div>
        </li>
        <li class="slide-item">
            <div class="slide-item-ctnt">02</div>
        </li>
        <li class="slide-item">
            <div class="slide-item-ctnt">03</div>
        </li>
        <li class="slide-item">
            <div class="slide-item-ctnt">04</div>
        </li>
        <li class="slide-item">
            <div class="slide-item-ctnt">01</div>
        </li>
        <li class="slide-item">
            <div class="slide-item-ctnt">02</div>
        </li>
        <li class="slide-item">
            <div class="slide-item-ctnt">03</div>
        </li>
        <li class="slide-item">
            <div class="slide-item-ctnt">04</div>
        </li>
        <li class="slide-item">
            <div class="slide-item-ctnt">01</div>
        </li>
        <li class="slide-item">
            <div class="slide-item-ctnt">02</div>
        </li>
        <li class="slide-item">
            <div class="slide-item-ctnt">03</div>
        </li>
        <li class="slide-item">
            <div class="slide-item-ctnt">04</div>
        </li>
    </ul>
    <button class="slidebtn slidebtn-prev prev">이전</button>
    <button class="slidebtn slidebtn-next next">다음</button>
</section>

CSS

body {
    background: #ccc;
}
 
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
 
.slide-wrap {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 1160px;
    background: black;
}
 
.slide {
    position: relative;
    width: 100%;
    height: var(--_slide-hei);
    cursor: grab;
    transform-origin: center bottom;
}
 
.slide.grabbing {
    cursor: grabbing;
}
 
.slide.transitionOK {
    transition: transform .8s ease-in-out;
}
 
.slide-item {
    outline: 1px solid red;
    position: absolute;
    width: 260px;
    height: 100%;
    top: 0;
    left: calc(50% - 130px);
    transform-origin: center bottom;
}
 
.slide-item-ctnt {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 100%;
    aspect-ratio: 26/31;
    background: #fff;
    border: 2px solid #ccc;
    border-radius: 10px;
    user-select: none;
    -webkit-user-drag: none;
    cursor: pointer;
}
 
.slidebtn {
    position: absolute;
    background: #fff;
    border: 1px solid #ccc;
    top: 130px;
    width: 50px;
    aspect-ratio: 1/1;
    border-radius: 50%;
    font-size: 11px;
    cursor: pointer;
}
 
.slidebtn-prev {
    left: calc(50% - 130px - 20px - 50px);
}
 
.slidebtn-next {
    left: calc(50% + 130px + 20px);
}

JS: 슬라이드 높이값 지정 및 아이템 회전하여 배치하기

const $slide = document.querySelector(".slide");
const $$item = document.querySelectorAll(".slide-item");
const $$btn = document.querySelectorAll(".slidebtn");
 
const DEG = 360 / $$item.length;
let CURR_IDX = 0;
 
/**
 * 아이템 갯수에 맞게 회전시킴
 */
function place_item_rotate_initially() {
    $$item.forEach(($item, idx) => {
        $item.style.transform = `rotate(${DEG * idx}deg)`;
    });
}
 
/**
 * 슬라이드 회전시킴 (transition 포함)
 */
function rotate_slide() {
    add_transition();
    $slide.style.transform = `rotate(${DEG * CURR_IDX * -1}deg)`;
}
 
/**
 * transition 없이 즉시 특정 각도로 회전 (드래그 중 RAF용)
 */
function rotate_slide_immediate(deg) {
    remove_transition();
    $slide.style.transform = `rotate(${deg}deg)`;
}
 
function add_transition() {
    $slide.classList.add("transitionOK");
}
function remove_transition() {
    $slide.classList.remove("transitionOK");
}
 
/* 슬라이드의 높이값 지정 */
const ITEM_COUNT = $$item.length;
const CARD_HEI = 310;
const GAP = 20;
const slideHeight = (ITEM_COUNT * (CARD_HEI * 1.5 + GAP)) / (2 * Math.PI)
$slide.style.height = `${slideHeight}px`;
 
/* 실행부 */
place_item_rotate_initially();
 
/* 버튼 클릭시 */
$$btn.forEach($btn => {
    $btn.addEventListener("click", () => {
        const isPrev = $btn.classList.contains("prev");
        const AMOUNT = isPrev ? -1 : 1;
        CURR_IDX += AMOUNT;
        rotate_slide();
    });
});

JS:드래그,터치 이벤트 추가

/**
 * 드래그 / 터치 처리
 *
 * 핵심 아이디어:
 *  - 드래그 시작 시 현재 적용된 rotate 각도를 baseAngle로 저장
 *  - 수평 이동량(px)을 감도 계수로 나눠 각도 변화량(delta)으로 환산
 *  - RAF 안에서 baseAngle + delta를 즉시 반영
 *  - 드래그 종료 시 delta로부터 몇 칸 이동했는지 계산 → CURR_IDX 보정 → snap
 */
 
// 드래그 상태
let isDragging = false;
let startX = 0;
let baseAngle = 0;   // 드래그 시작 시점의 rotate 각도 (deg)
let currentDelta = 0; // 현재 드래그로 추가된 각도 변화
let rafId = null;
 
// px → deg 감도 (값이 클수록 적게 돌아감)
const SENSITIVITY = 8;
 
/** 현재 $slide에 실제 적용 중인 rotate 각도를 읽어옴 */
function get_current_angle() {
    // computedStyle matrix에서 추출하는 대신, CURR_IDX 기반으로 계산
    // (rotate_slide가 항상 DEG * CURR_IDX * -1 로 세팅하므로)
    return DEG * CURR_IDX * -1;
}
 
/** 드래그 시작 공통 처리 */
function on_drag_start(clientX) {
    isDragging = true;
    startX = clientX;
    baseAngle = get_current_angle();
    currentDelta = 0;
    remove_transition();
    $slide.classList.add("grabbing");
    // 진행 중인 RAF가 있으면 취소
    if (rafId) cancelAnimationFrame(rafId);
}
 
/** 드래그 이동 공통 처리 */
function on_drag_move(clientX) {
    if (!isDragging) return;
    const diffX = clientX - startX;
    // 오른쪽으로 드래그 → 양수 diffX → 시계 반대 방향(음수 각도) 복귀 느낌
    // 실제 서울런처럼 오른쪽 드래그 = 이전 카드(양수 회전 방향)
    currentDelta = diffX / SENSITIVITY;
 
    // RAF로 부드럽게 반영
    if (rafId) cancelAnimationFrame(rafId);
    rafId = requestAnimationFrame(() => {
        rotate_slide_immediate(baseAngle + currentDelta);
    });
}
 
/** 드래그 종료 공통 처리 */
function on_drag_end() {
    if (!isDragging) return;
    isDragging = false;
    $slide.classList.remove("grabbing");
    if (rafId) {
        cancelAnimationFrame(rafId);
        rafId = null;
    }
 
    // delta(deg)를 기준으로 몇 칸 이동했는지 계산
    // DEG의 절반 이상 드래그했으면 한 칸 넘어감
    const steps = Math.round(currentDelta / DEG);
    // steps 양수 = 오른쪽 드래그 = 이전으로, 음수 = 왼쪽 드래그 = 다음으로
    CURR_IDX -= steps;
 
    // transition 붙이고 snap
    rotate_slide();
}
 
/* ── Mouse Events ── */
$slide.addEventListener("mousedown", (e) => {
    // 버튼 클릭은 무시
    if (e.target.closest(".slidebtn")) return;
    e.preventDefault();
    on_drag_start(e.clientX);
});
 
window.addEventListener("mousemove", (e) => {
    on_drag_move(e.clientX);
});
 
window.addEventListener("mouseup", () => {
    on_drag_end();
});
 
/* ── Touch Events ── */
$slide.addEventListener("touchstart", (e) => {
    if (e.target.closest(".slidebtn")) return;
    on_drag_start(e.touches[0].clientX);
}, { passive: true });
 
window.addEventListener("touchmove", (e) => {
    if (!isDragging) return;
    on_drag_move(e.touches[0].clientX);
}, { passive: true });
 
window.addEventListener("touchend", () => {
    on_drag_end();
});