← Back to Demos

Multiple Sliders

多個輪播

Multiple independent DriftSlider instances on a single page.

單一頁面中的多個獨立 DriftSlider 實例。

Gallery Slider

Basic slider with navigation and pagination.

Fade Slider

Fade effect with autoplay and custom dark color scheme.

  • Fade 1
  • Fade 2
  • Fade 3
  • Fade 4

Card Slider

Cards effect with stacking animation.

  • Card 1
  • Card 2
  • Card 3
  • Card 4

Source Code

js 
var DS = DriftSlider;

// Gallery Slider
new DS.DriftSlider('#gallery-slider', {
  modules: [DS.Navigation, DS.Pagination, DS.Keyboard, DS.A11y],
  slidesPerView: 1,
  spaceBetween: 20,
  speed: 400,
  grabCursor: true,
});

// Fade Slider
new DS.DriftSlider('#fade-slider', {
  modules: [DS.Pagination, DS.EffectFade, DS.Autoplay, DS.A11y],
  effect: 'fade',
  speed: 600,
  loop: true,
  autoplay: { enabled: true, delay: 3000, disableOnInteraction: false },
});

// Card Slider
new DS.DriftSlider('#card-slider', {
  modules: [DS.Navigation, DS.Pagination, DS.EffectCards, DS.A11y],
  effect: 'cards',
  speed: 500,
  cardsEffect: { mode: 'stack', overlay: true },
});