スライダーで有名なプラグイン、Swiperにはオプションを使って色々なスライダーを実装することが出来ます。
実務でも色々なタイプのスライダーを実装することになるので、どんなタイプのスライダーも実装出来るようにしておきましょう。
Swiperの基本的な使い方についてはこちらの記事を参照下さい。
【2024年最新Ver11】Swiperの使い方とよく使うオプション・カスタマイズ方法を解説
続きを見る
またSwiperには色々カスタマイズが出来るオプションがあるので、そちらも合わせて活用すると実装出来るスライダーの幅が広がります。
【Swiper】カスタマイズ用オプションまとめ一覧
続きを見る
- 完全無料
- 30日間でWeb制作を学べる
- 現役エンジニアへの質問無制限
- オンラインの動画学習なので時間場所を問わず勉強可能
- 最大4回の学習サポート面談
- 毎日人数制限ありの先着制
(有料になっていたらすいません🙇♂️)
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.
【Swiper】横方向に流れ続ける無限ループスライダーを作る方法
続きを見る
マウスホイールでスクロールして縦方向にスライド
See the Pen
Swiper:マウスホイールでスクロールしてスライド by junpei (@junpei-sugiyama)
on CodePen.
【Swiper】マウスホイールでスクロールして縦方向にスライドさせる方法
続きを見る
前後の矢印をカスタマイズ
矢印はCSSでカスタマイズする方法と、画像にする方法があります。
CSSでカスタマイズ
See the Pen
Swiper:矢印カスタマイズ by junpei (@junpei-sugiyama)
on CodePen.
画像でカスタマイズ
See the Pen
Untitled by junpei (@junpei-sugiyama)
on CodePen.
【Swiper】前へ次への矢印をカスタマイズする方法(画像変更あり)
続きを見る
ページネーション(ドットインジケーター)をカスタマイズ
ページネーションはCSSでカスタマイズする方法と、画像にする方法があります。
CSSでカスタマイズ
See the Pen
Untitled by junpei (@junpei-sugiyama)
on CodePen.
画像でカスタマイズ
See the Pen
Swiper:ドットを画像でカスタマイズ by junpei (@junpei-sugiyama)
on CodePen.
【Swiper】スライダーのページネーション(ドット)をカスタマイズする方法
続きを見る
左右が少し見えているスライダー
See the Pen
Untitled by junpei (@junpei-sugiyama)
on CodePen.
【Swiper】左右が少し見切れているスライダーの作り方
続きを見る
中央だけ大きく、左右は小さく薄く
See the Pen
Swiper(左右を小さく) by junpei (@junpei-sugiyama)
on CodePen.
【Swiper】スライダーの真ん中だけ大きく左右の画像は小さくする方法
続きを見る
PCは3枚、指定したブレイクポイントで1枚に変更
See the Pen
Swiper(ブレイクポイントでスライド数変更) by junpei (@junpei-sugiyama)
on CodePen.
これは画面幅500px以上でスライド3枚、500px未満でスライド1枚になるようにしています。
パソコンの場合、左上のHTML・CSS・JSをクリックすると1枚になります。
【Swiper】ブレイクポイントを設定してレスポンシブ対応のスライダーを作る方法
続きを見る
スライドの総数と現在のスライドが何番目か表示
See the Pen
Swiper: by junpei (@junpei-sugiyama)
on CodePen.
【Swiper】スライドの総数と現在のスライドが何番目か表示させる方法
続きを見る
矢印・ページネーションを外に出す
See the Pen
Untitled by junpei (@junpei-sugiyama)
on CodePen.
【Swiper】スライダーの矢印やページネーションを外に出す方法
続きを見る
サムネイルクリックでスライド切り替え
自動再生にはしていないので、サムネイルか矢印をクリックしてみてください。
スライド
See the Pen
Untitled by junpei (@junpei-sugiyama)
on CodePen.
フェード
See the Pen
Untitled by junpei (@junpei-sugiyama)
on CodePen.
【Swiper】サムネイルクリックで画像が切り替わるスライダーの作り方
続きを見る
ズーム(拡大)しながらフェードで切り替える
See the Pen
Untitled by junpei (@junpei-sugiyama)
on CodePen.
【Swiper】ズーム(拡大)しながらフェードで切り替える方法
続きを見る
プログレスバーを表示
プログレスバーはデフォルトでは上に表示されます。
上に表示(デフォルト)
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.
【Swiper】スライダーにプログレスバーを表示させる方法
続きを見る
グリッドスライダー
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.
【Swiper】上下複数行のグリッドスライダーの作り方
続きを見る
高さがバラバラのスライドの高さを自動調整
パソコンの場合は左上のHTML・CSS・JSをクリックすると見やすいです。
See the Pen
Swiper:高さがバラバラのスライドで高さを自動調整 by junpei (@junpei-sugiyama)
on CodePen.
【Swiper】高さがバラバラのスライドで高さを自動調整する方法
続きを見る
高さがバラバラのスライドを上下中央にする
See the Pen
Swiper:高さがバラバラのスライドを上下中央にする by junpei (@junpei-sugiyama)
on CodePen.
【Swiper】高さがバラバラのスライドを上下中央にする方法
続きを見る
テキストがふわっとフェードインで表示される
See the Pen
Swiper:テキストフェードイン by junpei (@junpei-sugiyama)
on CodePen.
【Swiper】テキストがふわっとフェードインで表示されるスライダーの作り方
続きを見る
ページネーションに番号を表示
See the Pen
Swiper(ページネーションに番号を表示する) by junpei (@junpei-sugiyama)
on CodePen.
【Swiper】ページネーションに番号を表示する方法
続きを見る
スマホだけスライダー(ブレークポイント切り替え)
See the Pen
Swiper () by junpei (@junpei-sugiyama)
on CodePen.
これは500px未満でスライダーとなります。
パソコンで見てる場合は左上のHTML・CSS・JSをクリックして画面幅を狭くすると、スライダーになるのが確認できます(もう一度クリックすればスライダーじゃなくなります)
【Swiper】スマホだけスライダーにする方法(ブレイクポイント切り替え)
続きを見る
パララックススライダー
See the Pen
Swiper:パララックス by junpei (@junpei-sugiyama)
on CodePen.
【Swiper】パララックススライダーを作る方法【サンプル付き】
続きを見る
エフェクト
エフェクトはデフォルトのスライド以外にフェードを含めて6種類あり、以下の記事にまとめています。
【Swiper】スライダーのエフェクトまとめ
続きを見る
まとめ
今回ご紹介したスライダーはオプションを使えばスライドの枚数を変えたり、スピードを変えたり色々とカスタマイズが可能です。
ぜひ色々と試してみてください。
以上になります。
関連記事slick記事一覧
関連記事Swiper記事一覧
関連記事Splide記事一覧