Swiper.jsを使用して作成できるスライダーのサンプル22選をデモ付きでご紹介します。
また、それぞれのスライダーの作成方法を記した記事のリンクも載せておきます。
目次
①ノーマルなスライダー
まずは特にカスタマイズしていないノーマルなスライダーです。
②矢印のカスタマイズ
2番目は矢印を任意の画像でカスタマイズしたスライダーです。
③ページネーションのカスタマイズ
ページネーションを任意の画像でカスタマイズしたスライダーです。
④矢印とドットを外に出す
矢印とドットが外に出ているスライダーです。
矢印を外に出すのに少し工夫が必要です。
⑤サムネイル付きのスライダー
サムネイル付きのスライダーです。
二つのスライダーを連動させて作成します。
⑥両サイドのスライドを少し見せる
両サイドのスライドが見切れたスライダーです。
slidesPerViewオプションを使用して作成します。
⑦ダブルスライダー
メインスライダーとテキストスライダーが連動して動くダブルスライダーです。
thumbsオプションを使用して実現します。
⑧無限ループスライダー
自動で流れ続ける無限ループスライダーです。
Swiperオプションだけでは実現できないのでCSSと組み合わせます。
⑨縦方向に動くスライダー
縦方向に動くスライダーです。
directionオプションで実現できます。
⑩グリッドスライダー
縦・横に複数表示するグリッドスライダーです。
gridオプションとslidesPerViewオプションを組み合わせて実現します。
⑪ネストスライダー
スライダーが入れ子になったネストスライダーです。
子スライダーを縦向きにすることも可能です。
⑫遅延読み込み
Swiper.jsにはlazyオプションが用意されているのでそれで遅延読み込みを行えます。
ロード時に読み込むリソースを減らすことにより表示速度の向上などが見込めます。
⑬キューブスライダー
立体的なキューブスライダーです。
effectオプションを使用して実現できます。
⑭カードスライダー
複数枚のカードのように重なって見えるカードスライダーです。
effectオプションを使用して実現できます。
⑮カバーフロースライダー
カバーフロースライダーです。
effectオプションを使用して実現できます。
⑯フリップスライダー
くるっとひっくり返る動きをするフリップスライダーです。
effectオプションを使用して実現できます。
⑰フェードスライダー
ふわっとスライドが切り替わるフェードスライダーです。
effectオプションを使用して実現できます。
⑱オリジナルスライダー
Swiper.jsにはcreativeEffectというオプションが用意されており、アクティブスライドの前後のスライドに対してかなり自由に変化を加えることができるため、オリジナルのスライダーを作成する事ができます。
⑲アクセシビリティを向上させたスライダー
以下の3つを実現することでアクセシビリティ（操作性）を向上させたスライダーです。
- ページネーションをクリック可能にする
- キーボードで操作できるようにする
- マウスホイール（またはトラックパッド）で操作できるようにする
⑳レスポンシブなスライダー
Swiper.jsにはbreakpointsオプションというものが用意されており、特定のブレイクポイント毎にオプションを指定する事が出来ます。これを利用してPCとSPでスライドの表示枚数を切り替えたりすることができます。
PCで見ている方はウィンドウ幅を縮めていただくと、下記のスライダーの表示枚数が3→2→1と切り替わるのが確認できると思います。
㉑スマホ(SP)のみ有効化したスライダー
レスポンシブ対応の一つとして、PCの時は一覧で表示してスマホの時のみスライダーにしたい時があると思います。
PCで見ている方はウィンドウを縮めていただくと下記のギャラリーがスライダーになるのが確認できると思います。
㉒タブ切り替え [NEW]
スライダーではありませんが、タブ切り替えメニューもSwiper.jsで作成する事ができます。
ページネーション部分を切り替えボタンとして活用しています。
以上、Swiperスライダーのデモ22選を紹介しました。
ぜひ作ってみてください！
