← Back to Demos

Custom Styling

自訂樣式

Customize arrow positions and pagination styles via JS parameters — no CSS overrides needed.

透過 JS 參數自訂箭頭位置和分頁樣式 — 無需覆寫 CSS。

Custom Bullets + Arrow Positioning

Slide 1
Slide 2
Slide 3
Slide 4
Slide 5

Current Slide: 1 / 5 Square bullets · Arrows at bottom corners

Progressbar Pagination

Slide 1
Slide 2
Slide 3
Slide 4
Slide 5

Current Slide: 1 / 5 Orange progress bar at bottom

Configuration Used

var DS = DriftSlider;

// Slider 1: Custom bullets + arrow positioning
var slider = new DS.DriftSlider('.drift-slider', {
  modules: [DS.Navigation, DS.Pagination, DS.Keyboard, DS.A11y],
  slidesPerView: 1,
  spaceBetween: 20,
  speed: 400,
  grabCursor: true,
  keyboard: { enabled: true },
  navigation: {
    prevStyle: { bottom: '16px', top: 'auto', left: '16px' },
    nextStyle: { bottom: '16px', top: 'auto', right: '16px' },
  },
  pagination: {
    style: { position: 'relative', bottom: 'auto', marginTop: '12px' },
    bulletStyle: { width: '14px', height: '14px', background: '#999', borderRadius: '3px' },
    bulletActiveStyle: { background: '#007aff', transform: 'scale(1.2)' },
  },
  on: {
    slideChange: function(s) {
      document.getElementById('current-index').textContent = s.realIndex + 1;
    },
  },
});

// Slider 2: Progressbar
var slider2 = new DS.DriftSlider('#slider-progress', {
  modules: [DS.Navigation, DS.Pagination, DS.Keyboard, DS.A11y],
  slidesPerView: 1,
  spaceBetween: 20,
  speed: 400,
  grabCursor: true,
  pagination: {
    type: 'progressbar',
    style: { top: 'auto', bottom: '0', height: '6px', background: 'rgba(255,255,255,0.3)' },
    progressStyle: { background: '#ff6b35', borderRadius: '0 3px 3px 0' },
  },
  on: {
    slideChange: function(s) {
      document.getElementById('progress-index').textContent = s.realIndex + 1;
    },
  },
});