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

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

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

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

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

じゅんぺいブログは、Web制作（コーディング・WordPress制作）の技術記事を中心に、約500記事公開しています。ぜひ他の記事も参考にしてみてください！

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

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

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

現在は無料ですがいつ有料になるか分からないので、気になる方はお早めに👇
（有料になっていたらすいません🙇‍♂️）

＼ 完全無料 ／

ZeroPlus Gate公式サイト

毎日先着制！

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

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

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

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

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

1枚表示（スライド）

1枚表示（フェード）

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

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

無限ループスライダー

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

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

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

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

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

waitForTransition使用

wheelSleep使用

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

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

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

CSSでカスタマイズ

画像でカスタマイズ

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

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

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

CSSでカスタマイズ

画像でカスタマイズ

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

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

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

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

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

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

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

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

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

サムネイル3枚

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

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

サムネイルの幅を指定

サムネイル2段

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

プログレスバーを表示

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

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

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

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

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

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

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

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

まとめ

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

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

以上になります。

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

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