Splide

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

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

サンプル

デフォルト

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

左右に余白

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

複数スライド

1スライドずつ移動

中央揃え

フリードラッグ

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

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

縦方向スライダー

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

マウスホイール操作

waitForTransitionオプションをtrueに設定する必要があります。

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

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

自動再生

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

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

Learn More

オプション

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

オプションを確認する

チュートリアル

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

チュートリアルを読む

API

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

APIを確認する

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

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

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