WEB制作で使える!jQueryのスライダー・カルーセルプラグイン 30選

このエントリーをはてなブックマークに追加

WEB制作で使える!jQueryのスライダー・カルーセルプラグイン 30選

スライダー、カルーセルのjQueryプラグインを集めてみました。基本的にレスポンシブ対応のものが主流ですね。さらに、自分が業務で使う際は、軽快さも気になります。既存のjsと競合してしまって上手く動かないとかも考えられるのでプラグインはいくつかの選択肢の中から合うものを選びたいですよね。あとは、GitHubのstarの数とか、アップデートがたくさんされているかなども選考基準になります!では、ノンストップで30個、紹介しますー

1. jQuery Content Slider | Responsive jQuery Slider | bxSlider

http://bxslider.com/

Home: http://bxslider.com/
Github: stevenwanderski/bxslider-4
ライセンス: 商用利用OK、MITライセンス

ダウンロードも上記ページからできます。

bxSliderはjQueryのスライダーのなかでかなり有名ですよね。Github上でもStarが結構ついていて人気なのが伺えます。さらに、日本語での解説サイトもたくさん出てきますし、実装も簡単!!レスポンシブや、タッチ操作にも対応できるので言うことなしでしょう。

ブラウザのサポート状況もFirefox, Chrome, Safari, iOS, Android, IE7+とほぼIEにも対応していて、レスポンシブで対応させるならbxSlider一択でもいいかも。

iPhoneでも確認しましたが、動作的にも滑らかに動くし、商用利用OKなのでおすすめです。

2. FlexSlider 2

http://flexslider.woothemes.com/

Home: http://flexslider.woothemes.com/
ライセンス: 商用利用OK、MITライセンス

これも結構有名なjQueryスライダーですね。対応ブラウザはSafari 4、Chromeの4 +、Firefox 3.6 +、Operaは10 +、IE7 +。 iOSとAndroidデバイスとのこと。スマホでも軽快に動きます。iPhone6で見たんですが、bxSliderよりも軽快に動いていました。とはいえ、androidとかiPhone4とかでも確認しないとですけど・・・。

キャプションをだしたり、サムネイルをだしたりも出来るみたいで使い勝手がよさそうです。

公式ページだと解説があまりない?ので、おすすめの解説サイトも一緒に紹介しますね。

レスポンシブなコンテンツスライダー「FLEXSLIDER」jQueryプラグインの使い方とサンプル | memocarilog
オンズ » 【jQuery】超万能スライダー FlexSlider の使い方をマスターする。

3. Owl Carousel

http://owlgraphic.com/owlcarousel/

Home: http://owlgraphic.com/owlcarousel/
ライセンス: MIT

このスライダーもレスポンシブ対応、タッチ操作対応です。やっぱスマホ対応が必須ですからねー。
動き的にはbxSlider、FlexSliderよりも若干もっさりしてるかなーって感じです。
ただ、オプションが結構使えそうです。例えば

JSONに対応できたり、Lazy Loadで画像の読み込み時にくるくるを出すことも出来ますし、Auto Heightで高さの違うコンテンツでもきれいにスライドできます。今度機会があったら使ってみたいスライダーですね。

4. Glide.js | Simple, responsive & lightweight jQuery slider

http://glide.jedrzejchalubek.com/

Home: http://glide.jedrzejchalubek.com/
ライセンス: MIT

アニメーションをCSS3のtransitionsとtransformsをベースに作られています。もちろんレスポンシブ対応です。対応ブラウザは注意する必要があります。CSS3のtransitionsとtransformsを使っているのでIEは10以上になると思います。

あ!ちなみに、CSSはBEM記法で書かれています。BEMに慣れている人にはわかりやすいCSSだと思います。

Glide.js | Simple, responsive & lightweight jQuery sliderここで詳しく解説もしてくれているので参考にしながら実装してみてください。

5. jQuery Hero Slider | CodyHouse

http://codyhouse.co/gem/hero-slider/?utm_source=jquer.in&utm_medium=website&utm_campaign=content-curation

Home: http://codyhouse.co/gem/hero-slider/?utm_source=jquer.in&utm_medium=website&utm_campaign=content-curation
ライセンス: 個人、商用可(Terms | CodyHouse

ライセンスは一応確認してください。僕、英語苦手なので・・・。

レスポンシブに対応した、簡単にカスタマイズできるスライダー「Hero Slider」です。
対応ブラウザはSafari、Chrome、Firefox、Opera、IE9+とのこと。IE8,7を捨てるなら使うのありっぽいですね〜。

とはいえ、最近IE8以下捨てる案件結構増えてきているからな〜。今度使ってみようかと。

スライダーの動きがいいかんじです。スライドされた後にコンテンツがスルッとスライドしてきます。言葉で説明するのは難しいので、実際デモで確認してください。Hero Slideshow

6. JQuery lightSlider

http://sachinchoolur.github.io/lightslider/?utm_source=jquer.in&utm_medium=website&utm_campaign=content-curation

Home: http://sachinchoolur.github.io/lightslider/?utm_source=jquer.in&utm_medium=website&utm_campaign=content-curation
ライセンス:MIT License

レスポンシブ対応、タッチ操作対応、さらに、Youtube Vimeo Video and html5 videos 対応しているようです。
対応ブラウザも多くて、Chrome, Safari, Firefox, Opera, IE7+, IOS, Android, windows phoneと幅広く使えそうなjQueryスライダープラグインですね。

7. Tikslus Carousel Demo

http://tikslus.com/tiksluscarousel/demo?utm_source=jquer.in&utm_medium=website&utm_campaign=content-curation

Home: http://tikslus.com/tiksluscarousel/demo?utm_source=jquer.in&utm_medium=website&utm_campaign=content-curation
ライセンス: 不明

このスライダーに関してライセンスがわかりませんでした。もしご使用になる場合は、ご自身でライセンスを確認してからの使用をおすすめします。

基本的なjQueryスライダーによくある機能はだいたい押さえつつ、フルスクリーンモードにすることができたり、おもしろいなと思います。ただ、参考になるサイトもあまり無いので、もしかしたら自分で試行錯誤しながらの実装になるかもしれません。

8. Flickerplate Plugin

Flickerplate Plugin

Home: http://getwebplate.com/plugins/flickerplate?utm_source=jquer.in&utm_medium=website&utm_campaign=content-curation
ライセンス: Apache License, Version 2.0
Apache License, Version 2.0を熟読の上使用してくださいとあります。

にしてもページ自体がおしゃれなサイトですね〜。

レスポンシブ、タッチ操作に対応しています。

Flickerplate本体以外にも必要な必要なjsがあるみたいですね。動き自体は軽快なんですけどね、運用にあたりあまりプラグイン周りでjsのファイル増やしたくない場合などはちょっと向かないかもな〜。

9. Slippry – A responsive slider by booncon PIXELS

http://slippry.com/?utm_source=jquer.in&utm_medium=website&utm_campaign=content-curation

Home: http://slippry.com/?utm_source=jquer.in&utm_medium=website&utm_campaign=content-curation
ライセンス: MIT license

HTML5 + CSS3 + jQueryで作られているレスポンシブに対応したスライダーです。チュートリアルを見た感じでも簡単に実装できそうなプラグインですね。examplesもたくさん用意されているので、とても参考になると思います。

examplesに「css vs jQuery」というのがあって、iPhoneで試しに見てみたんですが、やっぱりcssのほうがカクつきがなかったです。対応ブラウザについては明記されていないっぽいのですが、CSS3のtransformを使っているところから、IEは10+での対応かなと思います。

10. slick – the last carousel you’ll ever need

http://kenwheeler.github.io/slick/?utm_source=jquer.in&utm_medium=website&utm_campaign=content-curation

Home: http://kenwheeler.github.io/slick/?utm_source=jquer.in&utm_medium=website&utm_campaign=content-curation
ライセンス: MIT license

これが一番動きが滑らかで軽快だったかもです。もちろん他の端末でも検証しないとなんですが、とりあえず僕が見た中では一番動きがスムーズです。

レスポンシブ対応、スワイプ/マウスドラッグ、オートプレイ、無限ループ、画像のlazyloadなどスライダーであってほしい機能も一通りありますしかなりいい感じ。CSS3を使用しない通常のスライド動作であれば、IE8でも動作するようです。

サンプルも豊富にありますし、実装するさいにも参考になります。今度使ってみようかなと思えるプラグインでした〜

11. Fullscreen Slit Slider with CSS3 and jQuery

Slit Slider

Home: http://tympanus.net/Tutorials/FullscreenSlitSlider/
ライセンス: MIT license

詳しい実装の仕方はcodropsさんのFullscreen Slit Slider with jQuery and CSS3を参考にすると良いと思います。

にしても、このスライダーは動きが可愛いですね〜。iPhoneでもパカって割れるとことか、コロコロって動くとこも軽快に動いていますしいい感じです。もちろんレスポンシブに対応しています。対応ブラウザはSafari、Chrome、Firefox、Opera、IE10+です。CSS3を使っているので、しょうがないですが、案件によっては使ってみたいスライダーですね!

12. Blueprint: Full Width Image Slider

http://tympanus.net/Blueprints/FullWidthImageSlider/#

Home: http://tympanus.net/Blueprints/FullWidthImageSlider
ライセンス: MIT license

詳しい実装の仕方はcodropsさんのFull Width Image Sliderを参考にすると良いと思います。

レスポンシブなフルスクリーン対応スライダーです。サンプルはフルスクリーンなのかどうか若干わかりにくいですが・・・。ただ、動きは軽快なのでおすすめですね。

対応ブラウザについては明記されていないのですが、transitionを使っているぽいのでIE10+になるかなと思います。

13. Simple Multi-Item Slider with CSS Animations and jQuery

http://tympanus.net/Tutorials/ItemSlider/

Home: http://tympanus.net/Tutorials/ItemSlider/
ライセンス: MIT License

詳しい実装の仕方はcodropsさんのHow to Create a Simple Multi-Item Sliderを参考にすると良いと思います。

CSS3を使ってスライドしているのでIE10以上が対応かなと思います。対応ブラウザ明記されていないんですけどね。

とはいえ、ちょっと気になったのが、iPhoneで確認したらスライドが出来なかったんですよね・・・。動きは面白いんだけどもレスポンシブ対応とも明記されていないのでPCだけの対応かもしれないですね。残念。

14. Image Rotator w/ Desc – CSS & jQuery Tutorial

http://designm.ag/previews/jquery-image-rotator/

Home: http://designm.ag/previews/jquery-image-rotator/
ライセンス: 不明

しっかり明記されていないです。コメント欄でもやりとりがされていますね。

実装する際はCreate a CSS/jQuery Image Rotator with Descriptions – DesignM.agを参考にするといいです。

とりあえず使われているイラストがかわいいですね。ルイージマンションのイラストとか。

レスポンシブにも対応していないので実用的では無いかもしれません・・・。

15. Parallax Slider with jQuery

http://tympanus.net/Tutorials/ParallaxSlider/

Home: http://tympanus.net/Tutorials/ParallaxSlider/
ライセンス: 不明

実装の仕方はParallax Slider with jQueryを参考にするといいです。パララックス効果のついていて印象的なスライダーです。レスポンシブ対応ではないので用途は限られますね。ライセンスも表記がなく商用で使うのは微妙ですね〜

16. Jquery Slider

http://www.jqueryslidershock.com/#

Home: http://www.jqueryslidershock.com/
ライセンス: 個人利用の場合は無料、商用利用の場合は購入

無料の場合は個人利用でしか出来ないのですが、いろんな効果もあるし、レスポンシブ対応だし、ビルドツールも付いていてカスタマイズできるしと至れり尽くせりです。Build Your Ownというボタンを押すことで細かい設定ができます。例えば、文字の色やサイズ、他にもスライダーのサイズを変更できたりもします。このスライダーは一度試してみたいですね〜

17. Unslider — the super-tiny jQuery slider

http://unslider.com/

Home: http://unslider.com/
ライセンス: WTFPL

WTFPLはめっちゃゆるゆるのライセンスです。このスライダーのスクリプトは3KBと超軽量のオープンソースで、もちろんレスポンシブ対応です。IE9以上のすべてのモダンブラウザに対応しています。

軽量ですし、基本的なスライダーの機能も備えているので使い勝手が良さそうです。ただ、スマホでみると若干カクついているかな。

18. Destaque Slideshow Demo

http://globocom.github.io/destaque/

Home: http://globocom.github.io/destaque/
ライセンス: destaque/COPYING at master · globocom/destaque · GitHub参照

使われている画像がセクシーで目がいっちゃいますね。ただしレスポンシブではないです。ちなみに、Using multiple slides exampleはiPhone4sでは表示すらされなかったです。なのでもし使うにしてもPCのみの対応時のみですね。

ちなみにブラウザ対応状況はIE 7+、Firefox 3.6+、Chrome 4+、Safari 5+、Opera 10.10+となっています。

19. Camera | a free jQuery slideshow by Pixedelic

http://www.pixedelic.com/plugins/camera/

Home: http://www.pixedelic.com/plugins/camera/
ライセンス: MIT License

詳細な作り方は高機能過ぎるjQueryスライダー「Camera slideshow」を参考にすると良いと思います。

かなり高機能のようで、エフェクト、ナビゲーションなどいろいろ設定できるみたいですし、フルスクリーンもできるっぽいですね〜

ただ、対応ブラウザが記載されていない。

20. StackSlider: A Fun 3D Image Slider

http://tympanus.net/Development/StackSlider/

Home: http://tympanus.net/Development/StackSlider/
ライセンス: MIT License

細かい設定方法はStackSlider: A Fun 3D Image Sliderで確認してくださいね。

動きもカードをめくって隣におくって感じがして面白いスライダーですね〜。CSS 3D transformsを使用しているようなので、対応ブラウザはIEは10以上になりそうです。

21. Orbit: jQuery Slider Plugin | Playground from ZURB

http://zurb.com/playground/orbit-jquery-image-slider

Home: http://zurb.com/playground/orbit-jquery-image-slider
ライセンス: 記載無し

対応ブラウザは Chrome, Safari, FF3.5+とのことですが、IE7以上もテスト済み?のようです。4kBと軽量jQueryスライダーですね。ただ、ライセンスの記載が見つからず・・・。もしご使用になる場合は入念に調べてからお願いします。

22. Circular Content Carousel with jQuery

http://tympanus.net/Development/CircularContentCarousel/

Home: http://tympanus.net/Development/CircularContentCarousel/
ライセンス: Attribution-NonCommercial-NoDerivs 3.0 Unported (CC BY-NC-ND 3.0) License.

使うときはCircular Content Carousel with jQueryを参考にするといいです。

ちょっと古いjQueryスライダーかもしれません。レスポンシブに対応していないので用途が限られそうですね。対応ブラウザも記載がなくわからない状況です。

ただ、実装としてはかなり簡単にできそうなので、jQuery初心者の方や、はじめてjQueryプラグインを使う方にはおすすめかもしれません。

23. ResponsiveSlides.js · Responsive jQuery Slider & Slideshow

http://responsiveslides.com/

Home: http://responsiveslides.com/
ライセンス: MIT license

その名の通りレスポンシブに対応したスライダーです。しかも、対応ブラウザがすごいです!!

Internet Explorer 6,7,8,9
Firefox 3,6,8,11
Safari 5,5.1
Chrome 15,20
Opera 11,11.6
iOS Safari
Symbian 3 Webkit
Opera Mobile 10.1
Opera Mini for iOS
IE7, IE9 Mobile
Firefox Mobile
Android 2.3+
Kindle browser

かなり網羅してますねー!しかも軽量!言うことなし!対応状況選ぶならこのjQueryスライダーがいいかもしれないですね。テストも大変だろうに。頭が下がる思いです。

24. Thumbnail Proximity Effect with jQuery and CSS3

http://tympanus.net/Tutorials/ProximityEffect/index.html

Home: http://tympanus.net/Tutorials/ProximityEffect/index.html
ライセンス: Creative Commons Attribution-NonCommercial 3.0 Unported License

使用する際はThumbnail Proximity Effect with jQuery and CSS3を参考にしてください。

これはちょっとスライダーって呼べるのか不安ですが、マウスを乗せると面白い動きをします。Proximity Effectというみたいです。実際にDemoを見てもらった方がわかりやすいと思うのでぜひ見てみてくださいね。

25. sexyCycle

sexyCycle

Home: http://suprb.com/apps/sexyCycle/
ライセンス: MIT License

デモを見る限りではレスポンシブではなさそうです。とはいえ、いろんなエフェクトでスライドさせることが出来るという点で良いと思います。

26. Diapo | a free jQuery slideshow by Pixedelic

http://www.pixedelic.com/plugins/diapo/

Home: http://www.pixedelic.com/plugins/diapo/
ライセンス: MIT license

対応ブラウザはモダンブラウザとIE7,8とのこと

さまざまなエフェクトで切り替わりますね。動きはすごく印象的なんです。

27. Pogo Slider Creator Opencart module

http://fluice.com/pogo-slider/

Home: http://fluice.com/pogo-slider/
ライセンス: MIT license

参考:2014年総まとめ、jQueryのプラグインとスクリプト100選 | コリス

コリスさんでも紹介されていますね〜。
こちらも30個近い数のエフェクトが用意されています。css3のアニメーションを使っているので対応ブラウザはIE10以上ですね。iPhoneでも確認しましたが本当に滑らかに動きます。おすすめ!

28. Ideal Image Slider – Quite simply the ideal Image Slider in vanilla JS

http://gilbitron.github.io/Ideal-Image-Slider/

Home: http://gilbitron.github.io/Ideal-Image-Slider/
ライセンス: license to GPL

参考:2014年総まとめ、jQueryのプラグインとスクリプト100選 | コリス

こちらもコリスさんで紹介されていました。
対応ブラウザはIE10以上ですね。こちらもCSS3で動かしているので。とはいえ、レスポンシブだし、タッチ操作対応だし、動きも滑らかだし言うこと無いです!!

29. Tilted Content Slideshow

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

Home: http://tympanus.net/Tutorials/TiltedContentSlideshow/
ライセンス: [License](http://tympanus.net/codrops/licensing/)参照

動きがかっこいいスライダーです。斜めに動くー!!
css3でアニメーションしているのでiPhoneでも滑らかに動きます。ただ対応ブラウザはIE10以上かな。

とはいえレスポンシブ対応ですし、見た目のインパクトもありでいい感じです。

実装の仕方はTilted Content Slideshowを参照してください。

30. Slider Pro – Elegant and Professional Sliders

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

Home: http://bqworks.com/slider-pro/
ライセンス: MIT license

レスポンシブ対応、タッチ操作可能です。CSS3 transitionsを使っているのでIE10以上かな。
iPhoneでも問題なく軽快に動いていました。

さらに、いろんなレイアウトが変更できるのが魅力かもしれません。今度使ってみたいと思えるスライダーですね。

おわりに

今回はjQueryスライダープラグインを30個集めてみました。スライダープラグイン業界?
(そんなものがあるのかはわからない)もレスポンシブ対応していかないと生き残っていけないんですね〜。
ほとんどがレスポンシブ、タッチ操作対応という結果でした。
では、よきjQueryスライダープラグインライフを〜

こちらの記事もいかがですか?

イチマルニデザインブログをフォローしよう

イチマルニデザインブログではTwitterアカウントでWebに関する情報をつぶやいています。フォローすることで最新情報をすぐに受け取ることができます

いいなと思ったらシェアお願いします

このエントリーをはてなブックマークに追加

同じカテゴリーの記事

ページの先頭へ