画像が自動で流れるスライドショーは、Webサイトでよく見かけるギミックの一つです。
画像をスライドさせて表示させることで、複数のコンテンツとまとめて表示させられます。
JavaScriptを使えば、そんなスライドショーも自分でカスタマイズして作成可能です。
本記事で、JavaScriptでスライドショーを作成する方法や、便利なライブラリの特徴について見ていきましょう。
JavaScriptとは
JavaScriptとは、クライアントサイドで動作するプログラミング言語です。
主にWebサイトに動きを付与するために使用されており、導入することで静的なサイトを動的なサイトにレベルアップできます。
例えば、三点リーダーをクリックして開くハンバーガーメニューや、特定のエリアをクリックすると画面上部に戻るスムーススクロールなど、スライドショー以外にも、多彩な動作を導入できます。
これらの特徴から、JavaScriptはWebサイト制作において、欠かせない言語だといえるでしょう。
また、そのほかJavaScriptでできることについて知りたい方は、以下の記事を参考にしてみてください。
Webサイト制作に活用できることについても解説しています。
JavaScriptのスライドショーとは
JavaScriptのスライドショーは、複数の画像やコンテンツを自動的、または手動で切り替えて表示できる動きです。
ユーザーがボタンを押して次の画像に切り替えたり、一定の時間ごとに自動で次のスライドが表示されたりするなど、自分好みに自由なアレンジが可能です。
スライドショーは、多くの情報をコンパクトな領域にまとめられるため、ポートフォリオや製品紹介ページ、広告など、さまざまな用途で活用されています。
JavaScriptでスライドショーを作る方法
実際にJavaScriptを使って、ボタンをクリックしたら画像が切り替わるスライドショーを作成してみましょう。
1.HTMLを用意する
まずは、スライドショーを表示するための基本的なHTMLを用意します。このコードでは、画像を表示する領域と、進む・戻るボタンを配置しています。
<div id=”slide”>
<div id=”image_area”>
<img id=”img” src=”images/img01.jpg”>
</div>
</div>
<div id=”btn_area”>
<div class=”btn” id=”prev”>戻る</div>
<div class=”btn” id=”next”>進む</div>
</div>
</div>
#image_areaの中に画像を表示するimgタグを設置します。最初に表示される画像としてimages/img01.jpgを指定しています。
divタグの#prevと#nextはそれぞれ、画像を切り替えるための領域です。
これらの領域をクリックすることで、スライドが切り替わるように設定します。
2.CSSで見た目を整える
HTMLが書けたら、CSSを使ってスライドショーを使いやすいようにデザインしていきます。
画像の領域を指定したり、ボタンを横並びにしたりして見た目を整えておきましょう。
width: 640px;
margin: 0 auto;
}
#btn_area {
display: flex;
justify-content: space-around;
padding: 30px;
}
.btn {
background: #333;
color: #fff;
padding: 10px 20px;
cursor: pointer;
}
#slide_areaでは、領域全体の横幅の指定と、中央寄せを指定しています。#btn_areaでしているのは、ボタン同士の横並びと余白の指定です。
.btnでは、prevボタンとnextボタンの背景色や余白、マウスをホバーした際のカーソルの指定をしています。
3.JavaScriptで要素を取得する
次に、JavaScriptを使って画像とボタンのHTML要素を取得します。
const img = document.getElementById(‘img’);
const prev = document.getElementById(‘prev’);
const next = document.getElementById(‘next’);let current = 0;
定数imagesは、表示する画像のパスを配列として定義しています。
定数img、prev、nextで、それぞれの画像要素とボタン要素を取得しているため、後からこれらの要素に対して短い記述で操作ができるようになります。
変数currentは、現在表示されている画像のインデックスを示す変数です。
最初は0（1枚目の画像）に設定しています。
また、JavaScriptでHTML要素を取得する詳しい方法については、以下の記事で解説しています。
HTML要素をJavaScriptから追加する方法も解説しているので、JavaScriptの知識を深めたい方は、ぜひこちらもあわせてご覧ください。
4.進むボタンで画像が切り替わるようにする
次に、「進む」ボタンをクリックすると2番目以降の画像に切り替わるようにJavaScriptを実装します。
if(current +1 < images.length) {
current++;
img.src = images[current];
}
});
next.addEventListener(‘click’, …)は、「進む」ボタンがクリックされたときの処理を指定しており、if文で条件分岐をしています。
「current + 1 < images.length」は、次の画像が存在するかを確認する条件です。images.lengthではimagesの配列の長さを返し、currentに+1した数値がその長さより小さい場合、中の処理を行います。
current++でインデックスを1つ増やし、img.src = images[current]で次の画像のパスをimgタグに設定しているため、「current + 1 < images.length」の条件に当てはまる限り、画像が切り替わります。
5.戻るボタンで画像が切り替わるようにする
最後に、「戻る」ボタンをクリックしたときに、一つ前の画像に戻るようにします。
if(current > 0) {
current–;
img.src = images[current];
}
});
prev.addEventListener(‘click’, …)で「戻る」ボタンがクリックされた場合の処理を行います。
「current > 0」は、1枚目以外の場合に「戻る」を機能させるための条件です。
currentが0の場合は、1枚目の画像を指定しているので、戻る処理を行わないように制限しています。
current–でインデックスを1つ減らし、img.src = images[current]で前の画像に切り替えます。
ここまでできたら、ボタンをクリックしてみて、スライドショーの画像がしっかり切り替わるか確認してみましょう。
スライドショーを作るならライブラリの使用がおすすめ
JavaScriptでスライドショーを作るなら、ライブラリの使用がおすすめです。以下は、JavaScriptでスライドショーを作ることに特化したライブラリです。
- Swiper
- slick
これらのライブラリの特徴について見ていきましょう。
ライブラリ①Swiper
引用：Swiper
Swiperは、Webサイトにスライドショーを実装できるJavaScriptのライブラリです。
jQueryが不要なので、ほかのライブラリよりも読み込みが早い点と、実装に手間がかからない点が魅力です。
また、オプション機能が充実しているため、自由なカスタマイズができます。
オプションを活用すれば、キューブ型やカード型のスライドショーの実装も可能です。
豊富なオプション機能によって、初心者でも手軽にモダンなデザインのスライドショーを作れるでしょう。
ライブラリ②slick
slickはjQueryをベースとしたライブラリで、導入することでWebサイトにスライドショーを追加できます。
レスポンシブデザインに対応しているため、スマホでもパソコンでも表示が崩れないのが特徴です。
また、コードもシンプルなので、JavaScriptが得意でない方でも簡単にスライドショーを実装できます。
さらに、CDNが用意されているので、必要なコードをコピペするだけで使用できるのも魅力の一つです。
JavaScriptはどうやって学ぶ？
JavaScriptを学ぶ場合、主な選択肢となるのが独学、スクール、講座の3つです。それぞれの特徴を以下の表にまとめてみました。
| 学習方法 | メリット | デメリット |
| 独学 |
|
|
| スクール |
|
|
| 講座 |
|
|
それぞれの特徴を比較して、自分に合った方法で学習をしましょう。
JavaScriptでスライドショーを作る方法のまとめ
今回は、JavaScriptでスライドショーを作る方法について解説しました。
スライドショーは、複数の画像を順番に表示させられる動きで、Webサイトをよりリッチな仕上がりにできます。
また、スライドショーをJavaScriptで書くには長いコードが必要ですが、Swiperやslickといったライブラリを使用することで、短いコードで簡単に実装することも可能です。
自分のやりやすい方法を選び、スライドショーの実装にチャレンジしてみてください。
