🖼️ 05. 썸네일 갤러리

📝 구현 코드

HTML 구조

<!-- 메인 슬라이더 -->
<div class="swiper main-slider">
    <div class="swiper-wrapper">
        <div class="swiper-slide"><img src="main1.jpg"></div>
        <div class="swiper-slide"><img src="main2.jpg"></div>
        <div class="swiper-slide"><img src="main3.jpg"></div>
    </div>
</div>

<!-- 썸네일 슬라이더 -->
<div class="swiper thumb-slider">
    <div class="swiper-wrapper">
        <div class="swiper-slide"><img src="thumb1.jpg"></div>
        <div class="swiper-slide"><img src="thumb2.jpg"></div>
        <div class="swiper-slide"><img src="thumb3.jpg"></div>
    </div>
</div>

JavaScript

// 썸네일 슬라이더 먼저 초기화
var thumbSwiper = new Swiper(".thumb-slider", {
    spaceBetween: 10,
    slidesPerView: 4,
    freeMode: true,
    watchSlidesProgress: true,
});

// 메인 슬라이더 초기화 (썸네일과 연동)
var mainSwiper = new Swiper(".main-slider", {
    spaceBetween: 10,
    navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
    },
    thumbs: {
        swiper: thumbSwiper,    // 썸네일 슬라이더와 연동
    },
});

CSS 스타일링

/* 썸네일 기본 투명도 */
.thumb-slider .swiper-slide {
    opacity: 0.4;
    cursor: pointer;
}

/* 활성 썸네일 스타일 */
.thumb-slider .swiper-slide-thumb-active {
    opacity: 1;
}