2016年でも多くのサイトでトップページには、複数の画像をスライドショー形式で表示する表現が取り入れられていると思いますが。ですが、Webの進化ともにレスポンシブ対応であったり、様々な表示方法が求められるようになりました。
今回は、僕が実際の制作でおすすめしたり、導入したことのあるjquery/jsで作られた画像スライドショー・スライダーを4つ選出しました。このほかにも沢山優秀なスライダーはあると思いますが、多くの要件がこの4つのスライダーのどれかで事足り、かつ、導入も簡単なので業務の時短にぜひ検討してみてください。
Slider Pro
| 公式 | http://bqworks.com/slider-pro/ |
|---|---|
| サポートブラウザ | Firefox, Chrome, Safari, iOS, Android, IE10~ |
| 特徴 | レスポンシブ・タッチデバイス対応・Retina用画像の出し分け対応・IE8以上で動作・キャプションのアニメーション表示対応・縦カルーセル、横カルーセル対応・MITライセンス |
| おすすめ度 | ★★★★☆ |
このスライダーのおすすめするところは多機能であり、導入も容易であることです。様々な要件をこれ一つで満たしてくれるので本当に重宝しています。
日本語で解説してあるサイトもありますのでそちらも合わせてごらんください。
slick
| 公式 | http://kenwheeler.github.io/slick/ |
|---|---|
| サポートブラウザ | Firefox, Chrome, Safari, iOS, Android, IE10~ |
| 特徴 | レスポンシブ・タッチデバイス対応・IE10以上で動作・MITライセンス |
| おすすめ度 | ★★★☆☆ |
slickは汎用性の高い機能に加えて、カルーセル(スライドの動き方)のオプションも充実しています。
Swiper
| 公式 | http://www.idangero.us/swiper/#.VSziSBOsXrU |
|---|---|
| サポートブラウザ | モダンブラウザ |
| 特徴 | レスポンシブ・MITライセンス |
| おすすめ度 | ★★★☆☆ |
4つのなかで最も高機能なプラグインでスライド切り替えのアニメーションや、callback関数なども充実しています。
ただし、動作するのがモダンブラウザなのでIE10などは動作しない可能性がありますのでご注意ください。
bxSlider
| 公式 | http://bxslider.com/ |
|---|---|
| サポートブラウザ | Firefox, Chrome, Safari, iOS, Android, IE10~ |
| 特徴 | レスポンシブ・MITライセンス |
| おすすめ度 | ★★★☆☆ |
ページャーやコントローラー、ループ、スマホ対応、コールバック関数など、基本的な機能は大体揃っており、導入も簡単かつ有名プラグインなので日本語で導入方法を解説してあるサイトも多数あります。
ただし、前からあるプラグインで更新も昨年より止まっているようなのでモダンブラウザなどではもしかしたら不具合も出てくる可能性がありますので導入の際は少し注意が必要かもしれません。
まとめ
一口、スライダーといっても全画面表示や複数のスライダーを表示しなければならなかったりと一つのスライダーではカバーしきれないのが現状です。現状、一番おすすめできるのはSlider Proです。bxSliderは一部不具合もあるかもしれませんのでご注意ください。
また、ここに紹介していないおすすめのスライダーがありましたら、コメントやツイッターなどでご連絡いただけましたら幸いです。
