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

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

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

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

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

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

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

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

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

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

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

＼ 完全無料 ／

ZeroPlus Gate公式サイト

毎日先着制！

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.

エフェクト

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

まとめ

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

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

以上になります。

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

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