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

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

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

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

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

またSwiperには色々カスタマイズが出来るオプションがあるので、そちらも合わせて活用すると実装出来るスライダーの幅が広がります。

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

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

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

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

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

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

＼ 完全無料 ／

ZeroPlus Gate公式サイト

先着1日25名まで！

Swiperスライダー実装まとめ23選

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

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

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

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

1枚表示（スライド）

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

1枚表示（フェード）

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

2枚表示

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

無限ループスライダー

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

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

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

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

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

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

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

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

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

CSSでカスタマイズ

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

画像でカスタマイズ

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

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

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

CSSでカスタマイズ

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

画像でカスタマイズ

See the Pen
Swiper：ドットを画像でカスタマイズ by junpei (@junpei-sugiyama)
on CodePen.

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

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

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

See the Pen
Swiper（左右を小さく） by junpei (@junpei-sugiyama)
on CodePen.

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

See the Pen
Swiper（ブレイクポイントでスライド数変更） by junpei (@junpei-sugiyama)
on CodePen.

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

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

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

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

矢印・ページネーションを外に出す

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

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

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

スライド

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

フェード

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

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

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

プログレスバーを表示

プログレスバーはデフォルトでは上に表示されます。

上に表示（デフォルト）

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

下に表示

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

プログレスバーをカスタマイズ

See the Pen
Swiper：プログレスバー（カスタマイズ） by junpei (@junpei-sugiyama)
on CodePen.

グリッドスライダー

2行1列と2行2列をご紹介します。

2行・1列のスライダー

パソコンの場合は左上のHTML・CSS・JSをクリックすると見やすいです。

See the Pen
Swiper（グリッドスライダー：上下2枚） by junpei (@junpei-sugiyama)
on CodePen.

2行・2列のスライダー

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

高さがバラバラのスライドの高さを自動調整

パソコンの場合は左上のHTML・CSS・JSをクリックすると見やすいです。

See the Pen
Swiper：高さがバラバラのスライドで高さを自動調整 by junpei (@junpei-sugiyama)
on CodePen.

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

See the Pen
Swiper：高さがバラバラのスライドを上下中央にする by junpei (@junpei-sugiyama)
on CodePen.

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

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

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

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

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

See the Pen
Swiper （） by junpei (@junpei-sugiyama)
on CodePen.

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

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

パララックススライダー

See the Pen
Swiper：パララックス by junpei (@junpei-sugiyama)
on CodePen.

エフェクト

エフェクトはデフォルトのスライド以外にフェードを含めて6種類あり、以下の記事にまとめています。

まとめ

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

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

以上になります。

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

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