⬆️ 06. 수직 슬라이더

✕ 닫기

📝 수직 슬라이더 구현 코드

JavaScript

var verticalSwiper = new Swiper(".vertical-swiper", {
    direction: "vertical",        // 수직 방향
    slidesPerView: 1,
    spaceBetween: 30,
    mousewheel: true,             // 마우스휠 활성화
    pagination: {
        el: ".swiper-pagination",
        clickable: true,
    },
    keyboard: {
        enabled: true,            // 키보드 네비게이션
    },
    speed: 1000,                  // 전환 속도 (1초)
    
    on: {
        slideChange: function () {
            console.log('현재 슬라이드:', this.activeIndex + 1);
        }
    }
});

// 방향키로 조작
document.addEventListener('keydown', function(event) {
    if (event.key === 'ArrowUp') {
        verticalSwiper.slidePrev();
    } else if (event.key === 'ArrowDown') {
        verticalSwiper.slideNext();
    }
});

CSS 설정

.swiper {
    width: 100%;
    height: 100vh;              /* 전체 화면 높이 */
}

.swiper-slide {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* 페이지네이션을 오른쪽에 배치 */
.swiper-pagination {
    right: 20px !important;
    left: auto !important;
    width: auto !important;
}

활용 예시

풀스크린 웹사이트: 각 섹션이 화면 전체를 차지하는 원페이지 웹사이트

프레젠테이션: 슬라이드쇼 형태의 콘텐츠 표시

스토리텔링: 순차적으로 이야기를 전개하는 웹사이트