Product Gallery with Thumbnails

產品圖庫 + 縮圖導航

Product image gallery powered by the Thumbs module — click a thumbnail to navigate.

使用 Thumbs 模組的產品圖庫 — 點擊縮圖即可導航。

Source Code

html

<!-- Main slider -->
<div id="main-slider" class="drift-slider" style="height:500px;">
  <div class="drift-track"><ul class="drift-list">
    <li class="drift-slide"><img src="product-1.jpg" alt="Product 1"></li>
    <li class="drift-slide"><img src="product-2.jpg" alt="Product 2"></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>

<!-- Thumb slider -->
<div id="thumb-slider" class="drift-slider">
  <div class="drift-track"><ul class="drift-list">
    <li class="drift-slide"><img src="thumb-1.jpg" alt="Thumb 1"></li>
    <li class="drift-slide"><img src="thumb-2.jpg" alt="Thumb 2"></li>
    <!-- ... more thumbs -->
  </ul></div>
</div>

var DS = DriftSlider;

// Create thumbnail slider first
var thumbsSlider = new DS.DriftSlider('#thumb-slider', {
  slidesPerView: 5,
  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

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

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