用途別に紹介!スライダー、モーダル(ポップアップ)系のJSプラグインの紹介

         

javascript

用途別に紹介!スライダー、モーダル(ポップアップ)系のJSプラグインの紹介

2020年05月31日 20:00 2020年06月01日

用途別に紹介!スライダー、モーダル(ポップアップ)系のJSプラグインの紹介

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

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

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

 



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

シンプルに万能「SliderPro」

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

Slider Proは、レスポンシブでタッチに対応したjQueryとWordPressのスライダーで、エレガントでプロフェッショナルな見た目のスライダーを作成することができます。Slider Pro - エレガントでプロフェッショナルなスライダー

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

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

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

 

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

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

Swiperは、ハードウェアで加速されたトランジションと驚くべきネイティブ動作を備えた、最もモダンな無料のモバイルタッチスライダーです。Swiper - 最新のモバイルタッチスライダー

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

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

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

 

ギャラリー集など

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

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

様々な種類のメディアを提示するためのJavaScriptライトボックスライブラリ。レスポンシブ、タッチ対応、カスタマイズ可能。fancybox

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

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

 

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

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

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

Lityは超軽量でアクセスしやすく、レスポンシブなライトボックスプラグインで、画像、iframe、インラインコンテンツをサポートしています。Lity - 軽量でアクセスしやすく、応答性の高いライトボックス

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



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

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

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

参考になれば幸いです。

関連記事

この記事を書いた人

アバター

社員K

福岡でWebプログラマー・フロントエンドエンジニアとして10年目。まだまだ勉強することが沢山あるなぁと最近良く思います。日本語には自信があります。すぐに効くダイエット情報募集中!