jQueryスライダープラグイン9選！スライドショーを手軽に作成

更新日: 2020年09月18日

JavaScriptは非常に便利ですが、ゼロスクラッチでイチからコーディングを行うのは非常に大変です。そのため、何らかのフレームワークやライブラリを使うのが標準的ですが、その中でもjQueryはいまだに根強い人気を誇っています。

「脱jQuery」という言葉も耳にしますが、プラグインを読み込むだけで基本機能のほとんどが実装できてしまうjQueryプラグインは、初心者には大変ありがたいものです。

今回は、その中でも手軽で便利なjQueryスライダープラグイン9選をご紹介します。2018年に新規に立ち上げるサイトなどに、こうしたプラグインを採用してみましょう。
　　
▼こちらもチェック▼
UX向上の鍵！マイクロインタラクションにも使えるアニメーションプラグイン15選

手軽で便利なjQueryスライダープラグイン9選

1. slick

slickは、最も便利で手軽に使えるjQueryスライダープラグインです。欲しい機能のほとんどが実装されている、オールマイティなプラグインだと言えます。

スライダーは完全レスポンシブ対応で、コンテナの大きさに応じて可変します。ブレイクポイントを設定することで、デバイスの大きさに応じて異なる見せ方をすることも可能で、スマートフォンでのスワイプ動作のオン・オフの設定もできます。また、無限ループを設定することもでき、驚きなのはデスクトップではキーを使ったナビゲーションもできます。

実装もごくわずかなコードで行えるので、初心者でも多機能なスライダーを実現することが可能です。
　　

2. Felicity

Flickityは、レスポンシブ対応した、フリック可能なjQueryスライダープラグインです。

スライダーの設定は、jQuery側というよりもCSS側での設定に重点を置いているため、*「jQueryやJavaScriptはよくわからないけれど、CSSの設定なら大丈夫」*というノンプログラマーでも設定しやすいようになっています。

豊富なオプションやAPIも豊富で、初心者だけではなく、経験者にも満足できるスライダーです。自動再生や無限ループにも対応しています。
　　

3. Owl Carousel 2

Owl Carousel 2はタッチやスワイプにも対応したフルカスタマイズ可能なjQueryスライダープラグインです。jQueryプラグインの中にはCSS3でしか動かないものも多くありますが、Owl Carousel 2は古いブラウザやCSS2でのフォールバックもサポートしています。

また、Owl Carousel 2は複数のプラグインを接続する形で構成されており、使わない機能を切り離しておくことで軽量化も行えます。ホームページをできるだけ軽くしておきたい場合には、選択肢として入れてみるといいでしょう。
　　

4. Siema

Siemaは軽快なのにパワフルなjQueryスライダープラグインで、容量はたったの2KBで商用利用も可能です。

マークアップも極めて簡単な上に様々なオプションで高度な設定もでき、エレベーターメニューは付きませんがスマートフォンにも対応しているため、圧倒的な軽さを求めるならSiema一択になるでしょう。
　　

5. Glide

Glideは、ちょっと独特な動きをしたユニークなjQueryスライダープラグインです。もちろんレスポンシブ対応＆タッチフレンドリーです。

容量は14KBと軽量クラスでBEMで構築されており、SassやLESSとも互換性があります。APIも用意されており、HTMLのクラスで必要な機能を追加すればよいという、まさに痒いところにも手が届くプラグインだと言えます。

自動再生やオートプレイにも対応し、特定の条件でスライドを飛ばすなどの応用も可能です。

参考：
予想以上に実用的！CSSを効率的にマークアップする概念「BEM」とは？｜ferret
　　

6. ItemSlide.js

ItemSlide.jsは、モバイルフレンドリーで全画面カルーセルに対応したjQueryスライダープラグインです。

不要なスライドをスワイプアウトして消すことができたり、マウスホイールによるスクローリングにも対応しています。カルーセルは左寄せ・中央寄せで好きなようにも設定できます。
　　

7. jQuery Braziers Carousel Plugin

jQuery Brazzers Carousel Pluginは、フラット仕様のエレベーターメニューが印象的なjQueryスライダープラグインです。使い方は簡単で、CSSとプラグインのjQueryファイルを読み込んで、マークアップを行うだけです。npmでもインストールすることができ、その場合はコマンドラインに*「npm i brazzers-carousel」*と打ち込むだけでインストールが完了します。
　　

8. SuperSimpleSlider

SuperSimpleSliderは、その名のとおりとてもシンプルなjQueryスライダープラグインです。

jQueryではなくJavaScriptの文法を使って設定することが可能で、左右の矢印の画像なども個別に指定することができます。柔軟性があり、ほかのスクリプトにも依存しないので古いブラウザでも閲覧することが可能です。
　　

9. Swiper

Swiperは、モダンなデザインで高度な設定を施すことのできるjQueryスライダープラグインです。

スライダーの中のスライドにも入れ子でスライダーを設置することができたり、デスクトップではグリッド表示・モバイルではスライド表示といった複雑で高度な設定が可能です。カルーセル表示でサムネイルを付けることもできます。
　　

おすすめのjQueryプラグイン紹介記事

ferretには有用なjQueryプラグインを紹介した記事がまだまだあります。

いくつか紹介しておきますので、以下にもぜひ目を通してみてください。自社サイトのイメージに合う使い方がきっと見つかるはずです。

画像比較に使えるスライダープラグイン

画像比較を載せたい時に重宝する！スライドして画像を切り替える「JQueryスライダープラグイン」9選

画像比較ができるjQueryスライダープラグイン9つをご紹介していきます。ユーザーのマウス操作やスマートフォンの指の操作で作動するユニークなユーザーインターフェイスなので、ホームページやブログ記事で使うと面白みが増すかもしれません。

ブログ運営などをしていると、ビフォー&アフターのような感じで画像比較をしたい場面がちらほらあります。そういった際、単純に画像を2枚並べるのもいいのですが、画像比較専用のjQueryスライダープラグインを使えば、読者がスライダーを動かしてそれぞれの画像を見られるユニークな手法を取り入れることが可能です。

こちらの記事で9つのプラグインが紹介されているので、ブログの見せ方にマンネリを感じている方などはぜひ試してみてください。

フルスクリーン背景を取り入れる際に便利なプラグイン

インパクト抜群！フルスクリーン背景を実装するときに便利なjQeuryプラグイン9選

今回は、フルスクリーンでユニークな動きをするjQueryプラグインの中で特にオススメのものをご紹介します。フルスクリーン背景を単に実装するだけならCSSを設定するだけでできますが、背景をスライドショーのように表示したり、スクロールに連動して動くようなデザインにする場合は、jQueryプラグインの力を借りたほうがより早く綺麗なホームページを作ることができるでしょう。

美しい景色の画像などがウィンドウいっぱいに表示されるフルスクリーン背景を採用しているサイトは、第一印象で「おっ」と惹きつけられるものがありますjQueryプラグインには、このフルスクリーン背景にユニークな動きを加えられるものがたくさんあります。うまく活用すれば、訪問者により強い印象を与えるサイト作りができるでしょう。

こちらの記事でフルスクリーン背景に対応したjQueryプラグインを紹介しているので、一度覗いてみてください。