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

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

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

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

1. slick

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

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

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

2. Felicity

2.gif

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

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

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

3. Owl Carousel 2

3.gif

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

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

4. Siema

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

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

5. Glide

5.gif

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

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

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

参考:
予想以上に実用的!CSSを効率的にマークアップする概念「BEM」とは?|ferret
  

6. ItemSlide.js

6.gif

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

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

7. jQuery Braziers Carousel Plugin

7.gif

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

8. SuperSimpleSlider

8.gif

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

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

9. Swiper

9.gif

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

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

まとめ

フロンドエンド界隈では「脱jQuery」と言われることも多く、次第にjQueryから離れてVue.jsやAngularなどのフレームワークを採用することが圧倒的に多くなっています。

しかし、jQueryをプラグインとして使うことで、必要な機能をウィジェットのように実装することができるので、初心者にはいまだに使い勝手がいいと言えます。

jQueryプラグインの中でもスライダーは最も基本的かつ頻繁に使うプラグインです。新規に立ち上げるホームページに、ぜひこれらのプラグインを使ってみてはいかがでしょうか。
  
▼こちらもチェック▼
UX向上の鍵!マイクロインタラクションにも使えるアニメーションプラグイン15選