Splide

アクセシビリティに配慮した軽量・高機能スライダー。

ほかのライブラリに依存せず、Lighthouseのエラーもありません。

Released!

Splide Premium

WebGLのシェーダを利用した、目をみはるようなトランジション。

スポンサー限定のレポジトリで公開中!

サンプル

デフォルト

  • 01
  • 02
  • 03
  • 04
  • 05
  • 06
  • 07
  • 08
  • 09

左右に余白

  • 08
  • 09
  • 01
  • 02
  • 03
  • 04
  • 05
  • 06
  • 07
  • 08
  • 09
  • 01
  • 02

複数スライド

1スライドずつ移動

  • 04
  • 05
  • 06
  • 07
  • 08
  • 09
  • 01
  • 02
  • 03
  • 04
  • 05
  • 06
  • 07
  • 08
  • 09
  • 01
  • 02
  • 03
  • 04
  • 05
  • 06

ページングなし

v4.1.0以上から対応しています。

  • 01
  • 02
  • 03
  • 04
  • 05
  • 06
  • 07
  • 08
  • 09

中央揃え

フリードラッグ

フリードラッグ(スナップ)

カスタムページネーション

スライダーのプログレスバー

縦方向スライダー

縦方向のスライダーを使用するにはheightまたはheightRatioオプションのいずれかを与える必要があります。

  • 01
  • 02
  • 03
  • 04
  • 05
  • 06
  • 07
  • 08
  • 09

マウスホイール操作

waitForTransitionオプションをtrueにするか、wheelSleepを与える必要があることに注意してください。

スライド幅・高さの自動認識

スライドエレメントそのものの幅、または高さがそのまま使用されます。

自動再生

追加のHTMLを記述することで、プログレスバーによる進捗や、再生・停止ボタンを表示することができます。また、Intersectionエクステンションを利用すると、スライダーが画面内にあるときのみ自動再生を有効にすることもできます。

フェード効果

フェードモードは複数枚のスライドに対応していません。

右から左(RTL)

ネスト

ブレークポイント

ブレークポイントを使うと、スライダーをウィンドウの幅に応じて更新することができます。

動的な追加・削除

APIを利用すると、スライドを動的に追加・削除することができます。

  • 01

遅延読み込み

遅延読み込み(Lazy Load)を有効にすると、画像の読み込みを遅らせることで、読み込み時のロード時間を短縮することが可能です。ブラウザの開発ツール内にあるネットワークモニターで動作を確認してみてください。

サムネイル

Splideで作成されたスライダーは、お互いに動作を同期させることができます。この機能を利用すれば、サムネイルスライダーを簡単に作ることができます。

自動スクロール*

AutoScrollエクステンションを利用すると、スライダーを自動でスクロールすることができます(AutoScroll Extensionが必要です)。この拡張機能は、Intersectionエクステンションに対応しています。

動画*

Videoエクステンションを利用すると、各スライドにHTML、YouTube、あるいはVimeoの動画を割り当てることができます(Video Extensionが必要です)。この拡張機能は、Intersectionエクステンションに対応しています。

グリッド*

Gridエクステンションを利用すると、各スライド内にグリッドを作成できるようになります(Grid Extensionが必要です)。

ハッシュナビゲーション*

URL HashエクステンションはURLハッシュとスライダーと関連付け、スライダーが移動した際ハッシュも同時に更新するための拡張機能です(URL Hash Extensionが必要です)。スライダーを移動し、ブラウザのURLを確認してみてください。

About Splide

Splideは柔軟性に富み、軽量かつアクセシビリティに優れたスライダーライブラリです。オプションを変更するだけで、複数枚表示、サムネイル表示、縦方向に移動するスライダーなど、ありとあらゆるスライダーを簡単に作成することができます。また、APIを使用したり、あるいはExtensionを作成したりすることで、独自の機能を持ったオリジナルのスライダーを構築することも可能です!

  • 開発にTypeScriptを採用
  • 他のライブラリに非依存
  • 29kB(gzipで12kB)と軽量
  • 柔軟性と拡張性
  • 400を超えるテストケースによるライブラリの保護
  • 複数スライドに対応
  • CSSでのスライドまたはフェード遷移
  • Breakpointによるレスポンシブ対応
  • %やremなどの相対単位に対応
  • 異なるサイズの画像を自動でクロップ可能
  • プログレスバーや再生・停止ボタンを持った自動再生に対応
  • 右から左、上から下への方向に対応
  • マウスまたはスワイプによるドラッグ操作に対応
  • 位置を固定しないフリードラッグモード
  • マウスホイールによるスライドの遷移
  • ネストしたスライダーに対応
  • 遅延読み込み(Lazy Load)に対応
  • サムネイルスライダー
  • それぞれサイズが異なるスライドに対応
  • 優れたアクセシビリティ
  • ライブリージョンを標準搭載
  • Internet Explorer 10での動作

Learn More

オプション

Splideにはたくさんのオプションが用意されています。オプションを調整するだけで、様々なスライダーを簡単に作成できます。

オプションを確認する

チュートリアル

チュートリアルでは、たとえばギャラリー、サムネイルなど、少し複雑なスライダーを作成する方法について解説しています。

チュートリアルを読む

API

Splideはスクリプトからスライダーを制御したり、新たに機能を追加したりするためのAPIやイベントを提供しています。

APIを確認する

エクステンション(拡張機能)

もし独自の機能をスライダーに追加したい場合は、エクステンションを作成して汎用的に実装することができます。

エクステンションについて知る