サンプル
デフォルト
左右に余白
複数スライド
1スライドずつ移動
ページングなし
v4.1.0以上から対応しています。
中央揃え
フリードラッグ
フリードラッグ(スナップ)
カスタムページネーション
スライダーのプログレスバー
縦方向スライダー
縦方向のスライダーを使用するにはheight
またはheightRatio
オプションのいずれかを与える必要があります。
マウスホイール操作
waitForTransition
オプションをtrue
にするか、wheelSleep
を与える必要があることに注意してください。
スライド幅・高さの自動認識
スライドエレメントそのものの幅、または高さがそのまま使用されます。
自動再生
追加のHTMLを記述することで、プログレスバーによる進捗や、再生・停止ボタンを表示することができます。また、Intersectionエクステンションを利用すると、スライダーが画面内にあるときのみ自動再生を有効にすることもできます。
フェード効果
フェードモードは複数枚のスライドに対応していません。
右から左(RTL)
ネスト
ブレークポイント
ブレークポイントを使うと、スライダーをウィンドウの幅に応じて更新することができます。
動的な追加・削除
APIを利用すると、スライドを動的に追加・削除することができます。
遅延読み込み
遅延読み込み(Lazy Load)を有効にすると、画像の読み込みを遅らせることで、読み込み時のロード時間を短縮することが可能です。ブラウザの開発ツール内にあるネットワークモニターで動作を確認してみてください。
サムネイル
Splideで作成されたスライダーは、お互いに動作を同期させることができます。この機能を利用すれば、サムネイルスライダーを簡単に作ることができます。
自動スクロール*
AutoScrollエクステンションを利用すると、スライダーを自動でスクロールすることができます(AutoScroll Extensionが必要です)。この拡張機能は、Intersectionエクステンションに対応しています。
動画*
Videoエクステンションを利用すると、各スライドにHTML、YouTube、あるいはVimeoの動画を割り当てることができます(Video Extensionが必要です)。この拡張機能は、Intersectionエクステンションに対応しています。
グリッド*
Gridエクステンションを利用すると、各スライド内にグリッドを作成できるようになります(Grid Extensionが必要です)。
ハッシュナビゲーション*
URL HashエクステンションはURLハッシュとスライダーと関連付け、スライダーが移動した際ハッシュも同時に更新するための拡張機能です(URL Hash Extensionが必要です)。スライダーを移動し、ブラウザのURLを確認してみてください。