DriftDriftSlider

Lightweight, modular slider with physics-based touch interaction

輕量、模組化、物理慣性觸控的 Slider/Carousel 函式庫

v0.5.0 MIT License < 10KB gzip Zero Dependencies
Get Started GitHub
  • Slide 1
  • Slide 2
  • Slide 3
  • Slide 4
  • Slide 5

Why DriftSlider?

為什麼選擇 DriftSlider？

Built for modern web — fast, accessible, and endlessly customizable.

為現代網頁打造 — 快速、無障礙、可無限自訂。

Lightweight

輕量

Core under 10KB gzipped. Zero production dependencies.

核心不到 10KB gzip，零生產依賴。

Physics-Based Touch

物理慣性觸控

Velocity tracking + friction + bounce for natural feel.

速度追蹤 + 摩擦力 + 回彈，帶來自然手感。

Modular Architecture

模組化架構

9 optional modules — only bundle what you use.

9 個可選模組 — 只打包你需要的。

Accessible

無障礙

ARIA labels, keyboard navigation, prefers-reduced-motion.

ARIA 標籤、鍵盤導航、prefers-reduced-motion。

Dual Interface

雙介面

Vanilla JS (ESM/UMD/CJS) + jQuery plugin.

原生 JS (ESM/UMD/CJS) + jQuery 插件。

4 Effects

4 種效果

Slide, Fade, 3D Coverflow, and Cards (stack/diagonal/flip).

Slide、Fade、3D Coverflow、Cards（堆疊/對角/翻轉）。

Responsive

響應式

Breakpoint system for mobile-first adaptive designs.

斷點系統，支援行動優先自適應設計。

TypeScript Ready

TypeScript 支援

Full type definitions included out of the box.

內建完整型別定義。

Effects

效果展示

Four built-in transition effects to match any design.

四種內建轉場效果，適配任何設計。

  • Slide
  • Effect
  • Demo

Slide

Classic horizontal sliding

經典水平滑動

  • Fade
  • Effect
  • Demo

Fade

Smooth cross-fade transition

平滑交叉淡入淡出

  • A
  • B
  • C
  • D
  • E

Coverflow

3D cover flow perspective

3D 封面流透視效果

  • 1
  • 2
  • 3

Cards

Stacked card transitions

堆疊卡片轉場

Quick Install

快速安裝

Get started in seconds with your preferred method.

用你喜歡的方式，幾秒鐘即可開始。

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>
import DriftSlider from 'drift-slider';
import { Navigation, Pagination } from 'drift-slider/modules';
import 'drift-slider/css/bundle';