htmlで画像が自動で切り替わる「スライドショー」のテンプレート

Webサイトのメインビジュアルに設置されることが多い「スライドショー」。
画像が自動で切り替わるので、複数の画像を見せたいときやユーザーの目を引きたいときに向いています。
本記事では、jQuery・jQueryプラグイン・CSSのみといった3つの実装パターンをご紹介します。
コピペOKなテンプレートもあるので、ぜひご活用ください。

jQueryを使用して、スライドショーを実装しよう

まずはjQueryのみを利用した実装を紹介します。jQueryを使用すると、素のJavaScriptよりも短いコード量で簡単に作成できます。
しかし、jQuery自体が重いライブラリであるため、Webサイトが重くなってしまう可能性があり、注意が必要です。
今回は、Webサイトでよく使われている3パターンを実装します。

スライドで切り替わるスライドショー

画像がシュッと右側にスライドして切り替わっていくタイプのスライドショーです。画像全体を見せたい、順番に物事を見せたいときに設定すると効果的です。

フェードイン・フェードアウトで切り替わるスライドショー

ぼんやりと画像が切り替わっていくタイプのスライドショーです。スライドの表示時間を最大化できるので、画像の印象が強く残ります。

ズームしながら切り替わるスライドショー

ゆっくりと画像がズームしながら切り替わっていくタイプのスライドショーです。ズームすることで、より画像の細部に注目させることが出来ます。

jQueryプラグインを使用して、スライドショーを実装しよう

プラグインを使用すると、より簡単に、よりリッチなスライドショーを実装できます。
とても便利な反面、プラグインを使用しすぎるとWebサイトが重くなってしまったり、他のプラグインと競合が発生し機能しなくなったりする場合もあります。

おすすめはslick！特徴や使い方について紹介

スライダーを実装するためのプラグインは何個かありますが、今回はその中でも「slick」を紹介していきます。
slickにはオプションが豊富に備わっており、スライドショーのカスタマイズに柔軟に対応できます。レスポンシブ対応なところも魅力的なポイントです。

公式サイトはコチラ

基本的な使い方は以下の通りです。

➀slickを読み込む
今回はCDNを使用して、slickを読み込みます。以下のコードをheadとfooterに記述してください。

➁htmlを記述する
必要なものはスライドさせる子要素と、子要素を囲む親要素です。
今回は画像のスライドショーを作成したいので、子要素に画像をいれます。
クラス名は任意のものに変更してください。

➂jsを記述する
この1行の記述だけで、スライダーを動作させることができます。

①〜③のステップで、次のような表示と挙動になります。
slickはデフォルトで矢印が表示されるため、不要な場合はオプションから削除してください。
また、初期設定では自動でスライドが切り替わらないため、オプションから設定が必要です。

slickを使用して「スライドで切り替わるスライドショー」を実装する

jQueryで作成した「スライドで切り替わるスライドショー」を、今度はslickを使用して作成してみます。
主な挙動は、自動再生・左から右への画像スライド・矢印の非表示の3つ。これらの動きをオプションを使用して実装します。

slickを使用して「画像のサムネイル付きスライドショー」を実装する

slickのオプションをさらに使用して、「画像のサムネイル付きスライドショー」を実装します。
スライドショーの下にもう一つサムネイル用のスライドショーを作成し、オプションを使用して上のスライドショーと連動させていきます。

CSSのみでスライドショーを実装しよう

スライドショーはCSSのみでも実装が可能です。余計なファイルの読み込みが無い分動作が軽くなるほか、JavaScriptが苦手な方でもスライドショーの実装ハードルが下がります。
一方、CSSの記述量は増え、内容も複雑になるため、理想の挙動を実現するのに時間を要する場合があります。

cssのみで「スライドで切り替わるスライドショー」を実装する

transformプロパティを使用してスライドするアニメーションを作成し、各画像のアニメーションの開始位置を少しずつズラせば、順番にスライドさせることができます。

cssのみで「フェードイン・フェードアウトで切り替わるスライドショー」を実装する

opacityプロパティを使用してフェードイン・フェードアウトのアニメーションを設定し、各画像のアニメーションの開始位置を少しずつずらして作成します。

まとめ

Webサイトで画像が自動的に切り替わる「スライドショー」を、いろいろなパターンで実装してみました。
サイトの状況や構築する工数をふまえて、ベストな方法で実装していきましょう！