API Reference

API 參考

Complete reference for the DriftSlider constructor, options, properties, methods, and events.

DriftSlider 建構函式、選項、屬性、方法和事件的完整參考。

Constructor

建構函式

Create a new DriftSlider instance by passing a target element and an optional configuration object.

傳入目標元素和可選的設定物件來建立新的 DriftSlider 實例。

new DriftSlider(el: string | HTMLElement, options?: DriftSliderOptions)

// Using a CSS selector
const slider = new DriftSlider('.drift-slider', {
  slidesPerView: 3,
  spaceBetween: 16,
  loop: true,
});

// Using an HTMLElement
const el = document.getElementById('my-slider');
const slider = new DriftSlider(el, { speed: 600 });

Core Options

核心選項

Primary configuration options that control the slider's layout and behavior.

控制滑塊佈局和行為的主要設定選項。

Physics Options

物理引擎選項

Fine-tune the physics engine that powers touch/drag interactions. These values control how the slider feels when swiped.

微調驅動觸控/拖曳互動的物理引擎。這些數值控制滑動時的手感。

Touch Options

觸控選項

Control how the slider responds to touch and pointer input.

控制滑塊如何回應觸控和指標輸入。

CSS Classes

CSS 類別

Override the default CSS class names used by DriftSlider. Useful when integrating with existing CSS frameworks or naming conventions.

覆蓋 DriftSlider 使用的預設 CSS 類別名稱。在整合現有 CSS 框架或命名慣例時很有用。

Properties

屬性

Read-only properties available on a DriftSlider instance after initialization.

DriftSlider 實例初始化後可用的唯讀屬性。

Methods

方法

Public methods available on a DriftSlider instance. Methods that return DriftSlider are chainable.

DriftSlider 實例上可用的公開方法。回傳 DriftSlider 的方法可鏈式呼叫。

const slider = new DriftSlider('.drift-slider', {
  slidesPerView: 3,
  loop: true,
});

// Chainable navigation
slider.slideNext().on('slideChange', (s) => {
  console.log('Now at slide:', s.activeIndex);
});

// Destroy and clean up
slider.destroy(true);

Events

事件

DriftSlider emits lifecycle and interaction events. Listen via the on option at init time or via the .on() method after initialization.

DriftSlider 會發出生命週期和互動事件。透過初始化時的 on 選項或初始化後的 .on() 方法來監聽。

// Listen via the `on` option at init
const slider = new DriftSlider('.drift-slider', {
  on: {
    init: (s) => console.log('Initialized!'),
    slideChange: (s) => console.log('Slide:', s.activeIndex),
  },
});

// Or add listeners after init
slider.on('progress', (s, p) => {
  console.log('Progress:', Math.round(p * 100) + '%');
});

Breakpoints

斷點

The breakpoint system lets you define responsive overrides that apply at specific viewport widths. Breakpoints use a mobile-first approach: each key is a min-width value in pixels, and its options override the base configuration when the viewport is at least that wide.

斷點系統讓你定義在特定視窗寬度套用的響應式覆蓋設定。斷點採用行動優先策略：每個鍵值是以像素為單位的 min-width 值，當視窗至少達到該寬度時，其選項會覆蓋基礎設定。

The following options can be overridden inside a breakpoint:

以下選項可在斷點內覆蓋：

• slidesPerView
• spaceBetween
• slidesPerGroup
• centeredSlides
• loop
• speed
• grabCursor

new DriftSlider('.drift-slider', {
  slidesPerView: 1,
  spaceBetween: 16,
  breakpoints: {
    // when viewport >= 768px
    768: {
      slidesPerView: 2,
      spaceBetween: 20,
    },
    // when viewport >= 1024px
    1024: {
      slidesPerView: 3,
      spaceBetween: 24,
    },
  },
});

When the viewport width crosses a breakpoint boundary, the slider automatically recalculates its layout and emits the breakpoint event with the new breakpoint value.

當視窗寬度跨過斷點邊界時，滑塊會自動重新計算佈局並發出帶有新斷點值的 breakpoint 事件。

slider.on('breakpoint', (s, bp) => {
  console.log('Breakpoint changed to:', bp);
  console.log('Slides per view:', s.params.slidesPerView);
});