用途別に紹介！スライダー、モーダル（ポップアップ）系のJSプラグインの紹介

こんにちは！社員Kです。

今回は、普段のホームページ制作でもよく使っているJavaScript/jQueryのプラグインをご紹介したいと思います。

実際に使っている便利なものだけを厳選して紹介します！

サイトトップのメインビジュアル向け

シンプルに万能「SliderPro」

個人的に最もよく使っているスライダーです。
サイトのトップページに設置するメインビジュアル用途であればこれを使っておけばだいたい大丈夫な万能スライダーです。

よくあるレイアウト・使用例

• コンテンツ幅に収まるシンプルなレイアウト
• 画面幅いっぱいの表示領域を使ったレイアウト
• メイン画像の下にサムネイルを表示
• 画像の上にテキスト重ねて表示
• 縦方向にスライドする

▼導入方法、オプション、APIのリファレンスはこちら
https://github.com/bqworks/slider-pro/

豊富すぎるサンプルで万能「Swiper」

こちらのプラグインも「SliderPro」と同様のレイアウトを構築することができます。
デモページで豊富な使用例を紹介しており、かなり親切。

「SliderPro」にはないモダンな3Dな動きを利用するオプションが用意されています。
他と差をつけたいときに利用すると良いかもしれません。

▼デモページはこちら
https://swiperjs.com/demos/

▼導入方法、オプション、APIのリファレンスはこちら
https://swiperjs.com/api/

ギャラリー集など

ポップアップのなかでスライドショーができる「Fancybox」

美容室や写真屋さんなどホームページの中にギャラリーページを作る場合に便利なプラグインが Fancybox です。

サムネイルをクリックするとポップアップ表示して、ポップアップのウィンドウの中で同じグループの画像をスライドショーすることができます。

動画にも対応しており、ギャラリーページならこれ！という感じの便利なプラグインです。

シンプルにポップアップだけさせたい

軽量で導入が超簡単「Lity」

ページな中でワンポイントでクリックしたらポップアップして拡大表示させたい！というようなケースで便利なプラグインです。
導入もシンプルでとても簡単に利用できるが強みです。

画像だけではなく、クリックしたらポップアップの中でYouTubeの動画を再生したり、Googleマップを表示したり、任意のHTMLを表示させることも可能で応用も効くとても優秀なプラグインです。

いかがでしたでしょうか？

今回紹介したJSプラグインは、どれでも海外製のため導入方法やオプションの説明ページは英語表記で英語が苦手な人は難しいと感じてしまうかもしれません。

最近は翻訳ツールも優秀で、Chromeをお使いのユーザーならページを右クリックして表示されるメニューの中に自動翻訳の機能があるので思ったよりも難しくありません。

参考になれば幸いです。