스와이퍼 섬네일 슬라이드 만들기 (버티컬 방향 설정 방법까지)
Swiper를 활용한 이미지 갤러리 중, 섬네일이 세로 방향(버티컬)으로 나열된 썸네일 캐러셀을 구현하는 방법을 정리해보았습니다. 클릭 가능한 세로 썸네일과 메인 이미지를 연결해 하나의 슬라이드처럼 동작하도록 구성할 수 있습니다.
Swiper 기본형 갤러리가 궁금하신 분들은 이전에 작성한 Swiper 기본형(가로형) 썸네일 갤러리 구현 방법도 함께 참고해보시면 좋습니다.
👉 Swiper 기본형(가로형) 썸네일 갤러리 구현 방법
그럼 지금부터 차근차근 설명드릴게요 😊
1. Swiper CDN 연결하기
최신 버전(버전 11)의 Swiper를 CDN으로 연결합니다. 아래 코드를 <head>에 추가해주세요.
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"
/>
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>2. HTML 마크업 구조 만들기
버티컬 구조의 섬네일 슬라이드를 만들기 위해서는 메인 슬라이더와 썸네일 슬라이더 2개가 필요합니다. 다음은 예시 마크업입니다.
<div class="wrap">
<div class="thumbnail-slide-wrap">
<div class="thumbnail-slide">
<div class="item-thumb-box">
<!-- 메인 슬라이드 -->
<div class="swiper gallery-top">
<div class="swiper-wrapper">
<div class="swiper-slide">
<a class="img-box object-fit" href="#a" title="이미지 섬네일">
<img src="..." alt="이미지">
</a>
</div>
<!-- 생략: 다른 슬라이드 반복 -->
</div>
<div class="control-wrap">
<div class="thumbnail-btn thumbnail-btn-prev"></div>
<div class="thumbnail-btn thumbnail-btn-next"></div>
</div>
</div>
<!-- 썸네일 슬라이드 -->
<div class="swiper gallery-thumbs" thumbsslider="true">
<div class="swiper-wrapper">
<div class="swiper-slide">
<a class="img-box object-fit" href="#a" title="이미지 썸네일">
<img src="..." alt="이미지">
</a>
</div>
<!-- 생략: 다른 썸네일 반복 -->
</div>
<div class="swiper-scrollbar"></div>
</div>
</div>
</div>
</div>
</div>여기서 thumbsslider="true" 속성은 선택 사항이며, 특정 라이브러리나 UI 프레임워크와 함께 사용할 때 커스터마이징 용도로 활용할 수 있습니다.
또한 썸네일 슬라이더에는 <div class="swiper-scrollbar"></div> 요소를 추가하여 썸네일 개수가 많을 경우 스크롤바로 탐색할 수 있도록 설정합니다. 이 기능은 세로 슬라이드에서 매우 유용하며, 사용자가 원하는 섬네일을 빠르게 찾아 이동할 수 있게 도와줍니다.
특히 여러 개의 이미지를 한 화면에 다 보여주기 어려운 경우, 사용자는 스크롤바를 통해 원하는 썸네일 위치로 직접 이동할 수 있어 UX 측면에서도 매우 효율적입니다. 기본적으로 스크롤바는 마우스 드래그로 조작 가능하며, 터치 디바이스에서도 자연스럽게 사용할 수 있도록 설계되어 있습니다.
3. CSS 스타일 적용하기
버티컬 섬네일 구조에 맞게 레이아웃을 설정해줍니다. 아래는 주요 스타일입니다.
.wrap {
margin: 0 auto;
max-width: 1400px;
}
.thumbnail-slide-wrap .thumbnail-slide .item-thumb-box {
display: flex;
flex-direction: row-reverse;
position: relative;
}
.gallery-top .swiper-slide .img-box {
height: 680px;
}
.gallery-thumbs {
width: 70px;
height: 680px;
padding-right: 15px;
box-sizing: content-box;
}
.gallery-thumbs .swiper-slide {
width: 70px;
height: 70px;
}
.gallery-thumbs .swiper-slide-thumb-active:after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 3px solid #ff9100;
box-sizing: border-box;
}4. JavaScript로 Swiper 실행하기
Swiper 슬라이더를 실행하고 썸네일과 메인을 연결합니다.
document.addEventListener('DOMContentLoaded', function () {
const slideWrap = document.querySelector('.thumbnail-slide-wrap');
if (slideWrap) {
const galleryThumbs = new Swiper('.gallery-thumbs', {
spaceBetween: 10,
slidesPerView: 8,
freeMode: true,
watchSlidesProgress: true,
direction: 'vertical',
scrollbar: {
el: '.swiper-scrollbar',
draggable: true,
},
});
const gallerySlides = new Swiper('.gallery-top', {
spaceBetween: 10,
navigation: {
nextEl: '.thumbnail-btn-next',
prevEl: '.thumbnail-btn-prev',
},
thumbs: {
swiper: galleryThumbs,
},
});
}
});5. CodePen 데모 보기
아래 CodePen에서 실제 예제를 확인하실 수 있어요.
6. 마무리
이번 포스팅에서는 Swiper를 활용해 세로 방향 썸네일 캐러셀을 구현해보았습니다. 반응형 대응도 CSS에서 미디어쿼리로 설정해줄 수 있으니, 프로젝트 특성에 맞게 확장해보시면 좋겠습니다.
참고 링크
'Tech > JavaScript' 카테고리의 다른 글
| Chart.js 차트 사용법 완벽 가이드 - 반응형 설정과 Google Charts 비교 (Chart.js Tutorial) (0) | 2025.04.11 |
|---|---|
| Swiper 내부 영역 클릭 시, 의도하지 않은 슬라이드 이벤트가 발생하는 현상 해결하기 (1) | 2023.10.11 |
| 모바일 터치 이벤트를 따라다니는 요소 만들기 mobile touchmove event의 offset 값을 따라다니는 element 만들기 (0) | 2023.09.12 |
| position: sticky 요소가 stuck일 경우에만 CSS를 적용하는 방법 (0) | 2023.09.05 |
| Swiper 영역 너비가 동적으로 바뀔 경우, 내부의 콘텐츠 너비 업데이트하기 (0) | 2023.08.30 |
