レスポンシブ対応!jQueryでスライダーを実装するライブラリ11選!

今回はレスポンシブデザインにも対応したjQueryスライダーやスライドショーを11個まとめてみました。

スライドの種類も様々なので、目的にあったスライダーを見つけることができるとともいます。

 

slick

http://kenwheeler.github.io/slick/

割と有名なスライダーで、オプションが豊富で初心者でも使いこなしやすいように作られているのが特徴です。

オプションを使えばかなりいろいろなことができるので、とりあえずスライダーを使いたいという人は導入してみるといいと思います。

 

bxSlider

http://bxslider.com

こちらも設定が簡単で初心者にも使いやすく、スライダーの中では一番優しい設計になっていると思います。

同じくいろいろなことができるので、初心者なら一度使ってみることをオススメします。

 

Swiper

http://www.idangero.us/swiper/

こちらはjQueryなしでも使用可能なスライダーです。

jQueryを使わないにも関わらず高性能で、AbodeやBMWなどの有名企業でも採用されたことがあります。

 

Slider Pro

http://bqworks.com/slider-pro/

Proと名前に付いていますが無料です。

サムネイルをスライダーにしたいなら導入してみるといいと思います。いかにもサムネイル向けって感じです。

使いやすいスライダーですが、設定を細かくやるとコードが長くなりがちなので、そこだけ注意しましょう。

 

Glide.js

http://glide.jedrzejchalubek.com

左右にも空間が広がっているように見える、特徴的なスライダーです。ぱっと見がすごく素敵ですね。

動作も軽く、安定しているので導入してみる価値は大いにありますが、UIが合うサイトが限られてしまうのが残念。

デフォルトの設定のままだとHTMLがやや長くなりがちなので注意しましょう。

 

Skippr.

http://austenpayan.github.io/skippr/

フルスクリーンに対応した利用しやすいスライダーです。

画像をスライドさせる場合はHTMLのimgタグではなく、CSSのbackground-imageで指定します。

どちらかというとシンプルなスライダーで、複雑な動きは苦手です。

 

Flickity

http://flickity.metafizzy.co

こちらもjQueryを必要としないスライダーです。

設定にはHTML5のデータ属性を使用することもでき、スマホのタッチやフリック操作にも対応しています。

スマホ向けデザインが当たり前のように浸透している現在では嬉しいスライダーですね。

 

FlexSlider2

http://flexslider.woothemes.com

設定の機能が豊富なので、大体のことはできてしまう高機能スライダーです。

必要な部分だけ取り上げてオプションでカスタマイズしてしまえば欲しい機能は大体実現できてしまうでしょう。

 

Juicy Slider

http://redslim.ga/juicyslider/

Juicy Sliderでは画像の縦横比をJavaScriptを使って計算しているのが特徴です。これによってより多くのデバイスで同じように表示されるようになります。

動作もスムーズですがjQuery UIに依存している部分があり、導入の好き嫌いは分かれそうです。

 

Tilted Content Slideshow

http://tympanus.net/Tutorials/TiltedContentSlideshow/

動き方にかなり特徴のあるスライダーで、おそらく一般的なサイトに導入することはほとんどないでしょう。

使う場面は限られますが、合うサイトに導入すればかなりの効果を発揮してくれることは間違いありません。

ただし、スライドにはCSS3のTransformsやAnimationsなど最新の技術を使用しているため、古いブラウザでは動かないのが難点です。

 

Fullscreen Slit Slider

http://tympanus.net/codrops/2012/10/24/slit-slider-revised/

こちらもかなり特徴的な動きをするスライダーで、インパクトのあるサイトを作りたいときに使えると思います。

オプションはあまり用意されていませんが、CSSでスタイルを整えることができるので調整はそこまで難しくありません。

やはり導入するサイトは限られてきますが、他に類を見ないスライダーは導入を検討してみるのも面白そうです。

 

まとめ

以上、jQueryでオススメのレスポンシブ対応スライダーでした。

jQueryのスライダーは目的にあったものをいくつか見つけて使いこなせるようにしておくと幅広く使いまわせると思います。

全部とは言わないですが、気に入ったものをいくつか使いこなせるようにしておくと便利なことは間違い無いでしょう。