福岡 web・ホームページ制作 Eight(エイト)

[2016年版]本当に制作現場で使われているjquery/jsで作られた画像スライドショー・スライダー 4選

jquery/jsで作られた画像スライドショー・スライダー
Category:jQuery/javascript

2016年でも多くのサイトでトップページには、複数の画像をスライドショー形式で表示する表現が取り入れられていると思いますが。ですが、Webの進化ともにレスポンシブ対応であったり、様々な表示方法が求められるようになりました。

今回は、僕が実際の制作でおすすめしたり、導入したことのあるjquery/jsで作られた画像スライドショー・スライダーを4つ選出しました。このほかにも沢山優秀なスライダーはあると思いますが、多くの要件がこの4つのスライダーのどれかで事足り、かつ、導入も簡単なので業務の時短にぜひ検討してみてください。

Slider Pro

slider pro

公式 http://bqworks.com/slider-pro/
サポートブラウザ Firefox, Chrome, Safari, iOS, Android, IE10~
特徴 レスポンシブ・タッチデバイス対応・Retina用画像の出し分け対応・IE8以上で動作・キャプションのアニメーション表示対応・縦カルーセル、横カルーセル対応・MITライセンス
おすすめ度 ★★★★☆

DEMO

このスライダーのおすすめするところは多機能であり、導入も容易であることです。様々な要件をこれ一つで満たしてくれるので本当に重宝しています。

日本語で解説してあるサイトもありますのでそちらも合わせてごらんください。

万能スライダー Slider Pro の使い方

slick

slider-2016-img3

公式 http://kenwheeler.github.io/slick/
サポートブラウザ Firefox, Chrome, Safari, iOS, Android, IE10~
特徴 レスポンシブ・タッチデバイス対応・IE10以上で動作・MITライセンス
おすすめ度 ★★★☆☆

DEMO

slickは汎用性の高い機能に加えて、カルーセル(スライドの動き方)のオプションも充実しています。

Swiper

Swiper

公式 http://www.idangero.us/swiper/#.VSziSBOsXrU
サポートブラウザ モダンブラウザ
特徴 レスポンシブ・MITライセンス
おすすめ度 ★★★☆☆

DEMO

4つのなかで最も高機能なプラグインでスライド切り替えのアニメーションや、callback関数なども充実しています。

ただし、動作するのがモダンブラウザなのでIE10などは動作しない可能性がありますのでご注意ください。

bxSlider

bxSlider

公式 http://bxslider.com/
サポートブラウザ Firefox, Chrome, Safari, iOS, Android, IE10~
特徴 レスポンシブ・MITライセンス
おすすめ度 ★★★☆☆

DEMO

ページャーやコントローラー、ループ、スマホ対応、コールバック関数など、基本的な機能は大体揃っており、導入も簡単かつ有名プラグインなので日本語で導入方法を解説してあるサイトも多数あります。

ただし、前からあるプラグインで更新も昨年より止まっているようなのでモダンブラウザなどではもしかしたら不具合も出てくる可能性がありますので導入の際は少し注意が必要かもしれません。

まとめ

一口、スライダーといっても全画面表示や複数のスライダーを表示しなければならなかったりと一つのスライダーではカバーしきれないのが現状です。現状、一番おすすめできるのはSlider Proです。bxSliderは一部不具合もあるかもしれませんのでご注意ください。

また、ここに紹介していないおすすめのスライダーがありましたら、コメントやツイッターなどでご連絡いただけましたら幸いです。

Related Article

Comments

Page Top