0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

スライドショーを実装するjQueryプラグインやライブラリはどれを選べばよいのか。

Last updated at Posted at 2018-09-13

#いつも同じプラグインを使い回せるとは限らない#
これはまで数えきれないほど多くのサイトで採用されてきた、スライドショー・写真ギャラリー。
自分で1からJavaScriptを書かなくても、数多く配布されているjQueryプラグインやライブラリを使えば簡単に実装できます。

1度プラグインを使ってスライドショーを作った経験があれば、次に別のサイト制作で必要になった時にも同じプラグインを使い回すことでより効率よく作業を進められると考えがちですが、実はそう簡単にいかないケースもあります。

##スライドショーといっても形は様々
一口にスライドショーといっても、いろいろなパターンが考えられるのがその理由です。

  • レスポンシブに対応しているか
  • スワイプに対応しているか
  • スライドショーの画像サイズ・縦横比はバラバラでも対応できるか
  • 画像ごとのキャプションは入れられるか
  • サムネイルの有無
  • そのサムネイルはカルーセルになるかどうか
  • (さらに)画像が特定の枚数以上の時だけサムネイルをカルーセルにできるか(主にCMS対応)
  • 縦向きのスライドショーにできるか
  • スライドショーにパララックス効果をつけられるか
  • jQueryバージョンの問題
  • 画像の遅延読み込み(Lazy Load)はできるか

ざっと思いつくものを挙げてみただけでもこれだけ思い浮かびます。

1つのプラグインだけでどんなスライドショーも..とはいかない

もちろん、よく利用されているスライドショー用のjQueryプラグインにはオプションが豊富に用意されており、これらの要件を実現することも簡単です。

しかし1つのプラグインだけで、どんなスライドショーにも簡単に対応できるかというと、そうではなく「この要件とこの要件には合っているけど、これは実現できないのか..困った..」なんてことも起こりえます。

だからサイトのデザインやスライドショーの仕様が変われば、前のサイト制作で使ったスライドショー用のプラグインをそのままコピーして使うわけにはいかず、他のプラグインを探さなければならない、なんてことがあるのです。

特にやっかいなのはCMSに実装するときだなと感じています。
画像のトリミングなどできないお客さんが、スライドショーを自分で更新する場合です。
(デザインの要件に加えて、登録される画像のサイズ・縦横比バラバラかつ、何枚でもOKに対応したスライドショーにしなければならない)

意外と説明されてない「何ができないか」

いろいろなサイトやブログで「スライドショーにはこのjQueryプラグインが便利」と、いろんなものが紹介されています。

ところが、どこを見ても「この仕様には対応できない」というデメリットの説明はありません。

「こんなスライドショーの場合は対応できない」なんて説明があれば、探しやすいのですけどね...(いちいち試さなくて済む)
もっといえば、こんなスライドショーのときにはこのプラグイン、みたいに比較してまとめられていればもっといいのですが...

ということで、実案件で困った事例も含めて少しずつここにまとめていこうと思います。

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?