Installation

安裝

Choose the method that best fits your workflow.

選擇最適合你工作流程的方式。

npm install drift-slider

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/drift-slider/dist/drift-slider-bundle.css">
<script src="https://cdn.jsdelivr.net/npm/drift-slider/dist/drift-slider.umd.js"></script>

HTML Structure

HTML 結構

DriftSlider uses semantic HTML with a clear, predictable structure. Navigation arrows and pagination are optional.

DriftSlider 使用語意化 HTML，結構清晰、可預測。導航箭頭與分頁為可選項。

<section class="drift-slider" aria-label="My Slider">
  <div class="drift-track">
    <ul class="drift-list">
      <li class="drift-slide">Slide 1</li>
      <li class="drift-slide">Slide 2</li>
      <li class="drift-slide">Slide 3</li>
    </ul>
  </div>
  <!-- Optional: Navigation arrows -->
  <button class="drift-arrow drift-arrow--prev" type="button"></button>
  <button class="drift-arrow drift-arrow--next" type="button"></button>
  <!-- Optional: Pagination -->
  <div class="drift-pagination"></div>
</section>

CSS Import

CSS 匯入

Import the bundled stylesheet which includes all module styles, or import only the core styles if you prefer a minimal footprint.

匯入包含所有模組樣式的整合樣式表，或僅匯入核心樣式以減少檔案大小。

// Bundled (includes all module styles)
import 'drift-slider/css/bundle';

// Or core only
import 'drift-slider/css';

// Or per-module (for tree-shaking)
import 'drift-slider/css/navigation';
import 'drift-slider/css/pagination';

JavaScript Initialization

JavaScript 初始化

DriftSlider supports both ESM and UMD formats. Pick the one that matches your build setup.

DriftSlider 同時支援 ESM 和 UMD 格式，選擇與你建構工具相符的方式。

import DriftSlider from 'drift-slider';
import { Navigation, Pagination, Autoplay, A11y } from 'drift-slider/modules';
// Or import individual modules for smaller bundles:
// import Navigation from 'drift-slider/modules/navigation';

const slider = new DriftSlider('.drift-slider', {
  modules: [Navigation, Pagination, Autoplay, A11y],
  slidesPerView: 1,
  spaceBetween: 20,
  speed: 400,
  grabCursor: true,
  loop: true,
  autoplay: { enabled: true, delay: 3000 },
});

<script src="drift-slider.umd.js"></script>
<script>
  var DS = DriftSlider;
  var slider = new DS.DriftSlider('.drift-slider', {
    modules: [DS.Navigation, DS.Pagination, DS.A11y],
    slidesPerView: 1,
    speed: 400,
  });
</script>

jQuery

If your project uses jQuery, DriftSlider provides a dedicated plugin build. All modules are included automatically — no need to register them manually.

如果你的專案使用 jQuery，DriftSlider 提供專用的插件版本。所有模組已自動包含，無需手動註冊。

<script src="jquery.min.js"></script>
<script src="drift-slider.jquery.js"></script>
<script>
  $('.drift-slider').driftSlider({
    slidesPerView: 1,
    loop: true,
    navigation: true,
    pagination: { type: 'bullets' },
    autoplay: { enabled: true, delay: 4000 },
  });
</script>

Note: The jQuery build includes all modules automatically. You do not need to import or register them separately.

注意：jQuery 版本已自動包含所有模組，無需另外匯入或註冊。

TypeScript

DriftSlider ships with full TypeScript declarations. Use the exported types for strong type-checking on your slider options and event callbacks.

DriftSlider 內建完整的 TypeScript 型別宣告。使用匯出的型別可對滑塊選項和事件回呼進行嚴格的型別檢查。

import DriftSlider, { DriftSliderOptions } from 'drift-slider';
import { Navigation, Pagination } from 'drift-slider/modules';

const options: DriftSliderOptions = {
  modules: [Navigation, Pagination],
  slidesPerView: 1,
  speed: 400,
  on: {
    slideChange: (slider) => {
      console.log('Current slide:', slider.activeIndex);
    },
  },
};

const slider = new DriftSlider('.drift-slider', options);

Next Steps

下一步

Now that your slider is running, explore the full capabilities of DriftSlider:

滑塊已成功運行，接下來探索 DriftSlider 的完整功能：

• API DocumentationAPI 文件 — Full options reference, methods, and events. — 完整的選項參考、方法和事件。
• Modules Reference模組參考 — Deep dive into Navigation, Pagination, Autoplay, and more. — 深入了解 Navigation、Pagination、Autoplay 等模組。
• Demo Gallery範例展示 — Interactive examples for every effect and configuration. — 每種效果和配置的互動範例。