Splideスライダー実装まとめ19選【サンプル付き】

Splideってどんなスライダーが出来るの？

Splideにはオプションを使って色々なスライダーを実装することが出来ます。

実務でも色々なタイプのスライダーを実装することになるので、どんなタイプのスライダーも実装出来るようにしておきましょう。

Splideの基本的な使い方についてはこちらの記事を参照下さい。

完全無料のプログラミングスクール『ZeroPlus Gate』

30日間でWeb制作を学べる無料のプログラミングスクールがこちら

• 30日間でWeb制作を学べる
• 完全無料
• 現役エンジニアへの質問無制限
• オンラインの動画学習なので時間場所を問わず勉強可能
• 最大4回の学習サポート面談
• 受付は1日25名までの先着制

無料なのに専属のメンターが付き、現役エンジニアへの質問も無制限という破格のサービスです。

いきなり数十万するプログラミングスクールは厳しい・・・という人のお試しに最適。

現在は無料ですがいつ有料になるか分からないので、気になる方はお早めに👇

＼ 完全無料 ／

ZeroPlus Gate公式サイト

先着1日25名まで！

Splideスライダー実装まとめ19選

今回はSplideを使ったスライダーの実装集となります。

コードについてはデモのHTML、CSS、JSをクリックすれば確認出来るので、コピペしてお使い下さい。

またスライダーをリロードしたい時はデモの右下にあるRerunをクリックすればOKです。

細かく分けるともっとたくさんありますが、ここでは19種類と書いておきます。

1枚表示（スライド）

See the Pen
Splide：1枚表示のスライダー by junpei (@junpei-sugiyama)
on CodePen.

1枚表示（フェード）

See the Pen
Untitled by junpei (@junpei-sugiyama)
on CodePen.

複数枚表示（ページごとスライド）

See the Pen
Splide：3枚表示のスライダー（ページごとスライド） by junpei (@junpei-sugiyama)
on CodePen.

複数枚表示（1枚ごとスライド）

See the Pen
Splide：3枚表示のスライダー（1枚ごとスライド） by junpei (@junpei-sugiyama)
on CodePen.

無限ループスライダー

無限ループスライダーでは、ページネーション（ドットインジケーター）や次へ前への矢印は不要だと思うので、削除してあります。

無限ループスライダー（右から左）

See the Pen
Splide：無限ループ by junpei (@junpei-sugiyama)
on CodePen.

無限ループスライダー：逆方向（左から右）

See the Pen
Splide：無限ループ（逆方向） by junpei (@junpei-sugiyama)
on CodePen.

マウスホイールでスクロールして縦方向にスライド

これはスクロールに対する反応の仕方で2つの実装方法があります。

waitForTransition使用

See the Pen
Splide：マウスホイールでスクロールしてスライド(waitForTransition) by junpei (@junpei-sugiyama)
on CodePen.

wheelSleep使用

See the Pen
Splide：マウスホイールでスクロールしてスライド(wheelSleep) by junpei (@junpei-sugiyama)
on CodePen.

前後の矢印をカスタマイズ

矢印はCSSでカスタマイズする方法と、画像にする方法があります。

自動再生にはしていないので、矢印をクリックして確認してみて下さい。

CSSでカスタマイズ

See the Pen
Splide：矢印カスタマイズ（CSS） by junpei (@junpei-sugiyama)
on CodePen.

画像でカスタマイズ

See the Pen
Splide：矢印カスタマイズ（画像） by junpei (@junpei-sugiyama)
on CodePen.

ページネーション（ドットインジケーター）をカスタマイズ

ページネーションはCSSでカスタマイズする方法と、画像にする方法があります。

自動再生にはしていないので、ページネーションをクリックして確認してみて下さい。

CSSでカスタマイズ

See the Pen
Splide：ページネーションカスタマイズ（CSS） by junpei (@junpei-sugiyama)
on CodePen.

画像でカスタマイズ

See the Pen
Splide：ページネーションカスタマイズ（画像） by junpei (@junpei-sugiyama)
on CodePen.

左右が少し見えているスライダー

See the Pen
Splide（左右が少し見切れている） by junpei (@junpei-sugiyama)
on CodePen.

中央だけ大きく、左右は小さく薄く

See the Pen
Splide（中央だけ大きくする） by junpei (@junpei-sugiyama)
on CodePen.

PCは3枚、指定したブレイクポイントで1枚に変更

これは画面幅500px以上でスライド3枚、500px未満でスライド1枚になるようにしています。

パソコンの場合、左上のHTML・CSS・JSをクリックすると1枚になります。

See the Pen
Splide：ブレイクポイント設定（レスポンシブ） by junpei (@junpei-sugiyama)
on CodePen.

スライドの総数と現在のスライドが何番目か表示

See the Pen
Splide（スライドの総数と現在のスライドが何番目か表示） by junpei (@junpei-sugiyama)
on CodePen.

サムネイルクリックでスライド切り替え

これは4種類の実装例をご紹介します。

自動再生にはしていないので、サムネイルか矢印をクリックしてみてください。

サムネイル3枚

See the Pen
Splide：サムネイル（枚数固定） by junpei (@junpei-sugiyama)
on CodePen.

サムネイル3枚表示（全部で6枚スライド可）

これはアクティブなスライドを左にするか中央にするか設定可能です。

See the Pen
Splide：サムネイル（6枚：3枚表示：ループとセンター無し） by junpei (@junpei-sugiyama)
on CodePen.

See the Pen
Splide：サムネイル（6枚：3枚表示） by junpei (@junpei-sugiyama)
on CodePen.

サムネイルの幅を指定

See the Pen
Splide：サムネイル（幅固定） by junpei (@junpei-sugiyama)
on CodePen.

サムネイル2段

See the Pen
Splide：サムネイル（グリッド） by junpei (@junpei-sugiyama)
on CodePen.

ズーム（拡大）しながらフェードで切り替える

See the Pen
Splide（ズームしながらフェード） by junpei (@junpei-sugiyama)
on CodePen.

プログレスバーを表示

スライダーの下に表示されているのがプログレスバーになります。

バーの色、背景色、高さなどは調整可能です（今回は分かりやすくするために高めにしてあります）

See the Pen
Splide：プログレスバーを表示 by junpei (@junpei-sugiyama)
on CodePen.

高さがバラバラのスライドを上下中央にする

See the Pen
Splide：高さバラバラ（上下中央） by junpei (@junpei-sugiyama)
on CodePen.

テキストがふわっとフェードインで表示される

See the Pen
Splide：テキストフェードイン by junpei (@junpei-sugiyama)
on CodePen.

ページネーションに番号を表示

See the Pen
Splide（ページネーションに番号を表示する） by junpei (@junpei-sugiyama)
on CodePen.

スマホだけスライダー（ブレークポイント切り替え）

これは500px未満でスライダーとなります。

パソコンで見てる場合は左上のHTML・CSS・JSをクリックして画面幅を狭くすると、スライダーになるのが確認できます（もう一度クリックすればスライダーじゃなくなります）

See the Pen
Splide（スマホだけスライダー） by junpei (@junpei-sugiyama)
on CodePen.

まとめ

今回ご紹介したスライダーはオプションを使えばスライドの枚数を変えたり、スピードを変えたり色々とカスタマイズが可能です。

ぜひ色々と試してみてください。

以上になります。

関連記事slick記事一覧
関連記事Swiper記事一覧
関連記事Splide記事一覧

この記事が役に立ったと思ったら、シェアボタンからX（旧Twitter）などにシェアすると、いいねされてフォロワーが増えたりすることがあるよ！