Vertical Thumbnails

垂直縮圖導航

Vertical thumbnail navigation on the right side, powered by the Thumbs module.

右側垂直縮圖導航，使用 Thumbs 模組驅動。

Source Code

html

<div class="gallery-layout">
  <!-- Main slider (75% width) -->
  <div class="gallery-main">
    <div id="main-slider" class="drift-slider" style="height:400px;">
      <div class="drift-track"><ul class="drift-list">
        <li class="drift-slide"><img src="image-1.jpg" alt="Image 1"></li>
        <!-- ... more slides -->
      </ul></div>
      <button class="drift-arrow drift-arrow--prev" type="button"></button>
      <button class="drift-arrow drift-arrow--next" type="button"></button>
      <div class="drift-pagination"></div>
    </div>
  </div>

  <!-- Vertical thumb slider (25% width) -->
  <div class="gallery-thumbs" style="height:400px;">
    <div id="thumb-slider" class="drift-slider" style="height:100%;">
      <div class="drift-track"><ul class="drift-list">
        <li class="drift-slide"><img src="thumb-1.jpg" alt="Thumb 1"></li>
        <!-- ... more thumbs -->
      </ul></div>
    </div>
  </div>
</div>

var DS = DriftSlider;

// Create vertical thumbnail slider first
var thumbsSlider = new DS.DriftSlider('#thumb-slider', {
  direction: 'vertical',
  slidesPerView: 4,
  spaceBetween: 8,
  grabCursor: true,
});

// Create main slider with Thumbs module
var mainSlider = new DS.DriftSlider('#main-slider', {
  modules: [DS.Thumbs, DS.Navigation, DS.Pagination],
  loop: false,
  thumbs: {
    slider: thumbsSlider,
    slideThumbActiveClass: 'drift-thumb--active',
    autoScrollThumbs: true,
  },
  pagination: {
    el: document.querySelector('#main-slider .drift-pagination'),
    type: 'fraction',
  },
  navigation: {
    prevEl: document.querySelector('#main-slider .drift-arrow--prev'),
    nextEl: document.querySelector('#main-slider .drift-arrow--next'),
  },
});

css

.gallery-layout {
  display: flex;
  gap: 12px;
}
.gallery-main { flex: 0 0 75%; }
.gallery-thumbs {
  flex: 0 0 calc(25% - 12px);
  height: 400px; /* match main slider height */
}

/* Inactive thumbnails */
.thumb-slider .thumb-img {
  opacity: 0.5;
  cursor: pointer;
  border: 2px solid transparent;
}

/* Active thumbnail */
.thumb-slider .drift-thumb--active .thumb-img {
  opacity: 1;
  border: 2px solid #007aff;
}