ONZE/BLOGオンズ開発ブログ

レスポンシブ・デザインに対応したスライダーやスライドショー系のライブラリをまとめました。ほとんどがjQueryプラグインになりますが、中には単体で動くものもあります。オプション設定で多数のエフェクトの中から好みの動作のものを選択できたり、自動スライドやサムネイル表示やフリック入力に対応するなど、そのタイプも様々。
初心者の方でも上級者の方でも、目的に合ったjQueryスライダーを見つけられるはずです。

bxSlider

最初に紹介するのが［bxSlider］です。
設定が簡単で初心者にも扱いやすく、本当に初めてjQueryに触れるなら一番初めに試してみることをお勧めするスライダーです。

ただしカルーセル化するとレスポンシブ機能に不具合があるのが残念なところ。

Swiper

jQuery無しで動く秀逸なスライダー。
モバイルデバイスのタッチ操作にも早い時期から対応していたので、以前は大分お世話になりました。

公式サイトによると「Adobe」「BMW」「Disney」「LACOSTE」「PEUGEOT」「verizon」「vodafone」などの超有名企業のウェブサイトでも採用された実績があるようです。

Slider Pro

「Pro」と名が付いていますが無料で利用できるjQueryスライダーです。
サムネイル機能の導入方法が比較的簡単で扱いやすいですね。
非常に優秀なのですが、細かく設定しようとするとコードが長くなってしまうのが難点。そのため辛口の評価で星は２つ（★★☆☆☆）です。

slick

動作も安定していてオプションも豊富。設置方法も比較的簡単なので初心者の方でも充分に使いこなせる親切設計。
サブタイトルで「the last carousel you’ll ever need」と謳っているくらいで、とりあえず何でもいいからスライダーを使いたい、というときに試してみてはいかがでしょうか。

現状、特に不具合も見当たらないのでオススメ度は高めの星４つ（★★★★☆）にしました。

Flickity

jQueryに依存せずに単体で動き、設定にはHTML5のデータ属性を利用することも可能。
またモバイル端末のタッチやフリック入力にも対応しています。

製作者は「Masonry」「Isotope」や「Packery」など超有名ライブラリも開発している「Dave DeSandro」氏。
弊社でも大変お世話になっています。

FlexSlider 2

設定項目が多く、痒いところにも手が届く超万能スライダー。度々、大手企業のウェブサイトでも導入されているのを見かけます。
某有名ブログサイトでも導入されていましたが、ソースコードを確認したら弊社のサンプルが丸パクリされていたというオチもありました……（苦笑）

Glide.js

デフォルトのままだとHTMLの記述が長くなってしまうのが難点。しかし動作も軽快で安定しているので自信を持ってオススメできるjQueryプラグインです。

Skippr.

フルスクリーンにも対応しているため、比較的利用機会の多いjQueryスライダーです。

画像は「img」タグによる埋め込みではなくCSSの「background-image」で指定します。

あまり複雑なことはできませんが、逆にシンプルなスライドショーを実装したいときには真価を発揮します。

Juicy Slider

他の多くのスライダー系プラグインと異なり、画像のアスペクト比を JavaScript を使って計算することで、より多くのデバイスで同じように表示されるようになっています。

軽快でスムーズに動作するのですが、それは「jQuery UI」に依存しているため。これをメリットと捉えるかデメリットとして捉えるかは好みの分かれるところです。

Tilted Content Slideshow

斬新な動きのスライドショーで、高級感のあるサイトをデザインするときに有力な選択肢として使えるでしょう。

ただしアニメーションはカッコイイのですが、CSS3の「Transforms」と「Animations」など最新の技術に依存しているため古いブラウザでは動きません。

Fullscreen Slit Slider

「Fullscreen Slit Slider」は非常にオリジナリティが高く、同じような動きをするスライドショーは、現在のところは他に見当たりません。
百聞は一見に如かず。ぜひ動作サンプルを見てください。

細かなカスタマイズはスタイルシートで調整することになりますが、CSSの知識があればそれほど難しくはありません。

他には無い際立ったエフェクトが個人的にも気に入っているので、オススメ度は最高の５つ星（★★★★★）としました。

最後に

以上。お勧めできるスライダー系ライブラリを11個、紹介しました。

ウェブサイトにスライドショーを実装したいなら、この中から選んでおけば間違いはないハズです。
すべてを試すのは時間がかかるのでオススメできませんが、目的に合った好みのものを見つけ出す参考にしてください。