← Back to Demos

Multi-Row Grid

多行網格

Two synced slider instances stacked to create a multi-row grid — navigation controls the pair together.

兩個同步的輪播堆疊組成多行網格 — 導航控制同時操控兩者。

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

Source Code

js 
var DS = DriftSlider;

// Row 1 — no visible controls (driven by row 2)
var row1 = new DS.DriftSlider('#row1', {
  modules: [DS.Navigation, DS.Pagination, DS.A11y],
  slidesPerView: 3,
  slidesPerGroup: 3,
  spaceBetween: 16,
  speed: 400,
});

// Row 2 — arrows + pagination visible
var row2 = new DS.DriftSlider('#row2', {
  modules: [DS.Navigation, DS.Pagination, DS.A11y],
  slidesPerView: 3,
  slidesPerGroup: 3,
  spaceBetween: 16,
  speed: 400,
});

// Sync: when either row changes, the other follows
var syncing = false;
row1.on('slideChange', function(s) {
  if (!syncing) { syncing = true; row2.slideTo(s.activeIndex); syncing = false; }
});
row2.on('slideChange', function(s) {
  if (!syncing) { syncing = true; row1.slideTo(s.activeIndex); syncing = false; }
});