- 2022.12.07
- JavaScript
- GIV_wataru
JavaScriptでスライドショーを作成する方法
スライドショーは画像一枚分のスペースで複数の画像が切り替えられる機能です。これがあれば限られたスペースでも、ユーザーに多くの画像情報を伝えられます。

スライドショーはjqueryやswiper.jsなどで簡単に実装できますが、ライブラリーを使わなくても、素のjavascripでも作成できます。ライブラリーを使わないで作成することで、javascripの理解も深まります。今回は素のjavascriptでスライドショーを作成する方法を紹介します。
javascriptでスライドショーを実装できるコード
全体的なコードは次のとおりです。
▢HTML
<div class="slide_box"> <div class="slide_image_box"> <img id="slide_image" src="img/image1.jpg" alt=""> <div class="change_btn_right"><i class="fas fa-chevron-right fa-4x"></i></div> <div class="change_btn_left"><i class="fas fa-chevron-left fa-4x"></i></div> </div> </div>
▢CSS
.slide_box { margin: 0 auto; border: 1px solid #000000; width: 600px; } .slide_box .slide_image_box { position: relative; max-width: 100%; text-align: center; } .slide_box .slide_image_box img { vertical-align: top; } .slide_box .slide_image_box .change_btn_right { position: absolute; right: 0px; top: 50%; color: #ffffff; cursor: pointer; } .slide_box .slide_image_box .change_btn_left { position: absolute; left: 0px; top: 50%; color: #ffffff; cursor: pointer; }
▢JS
const images = ['img/image1.jpg', 'img/image2.jpg', 'img/image3.jpg', 'img/image4.jpg', 'img/image5.jpg']; let slideCount = 0; const next = document.querySelector('.change_btn_right'); const prev = document.querySelector('.change_btn_left'); next.addEventListener('click', function () { slideCount++; if (slideCount < images.length) { document.getElementById('slide_image').src = images[slideCount]; } else { document.getElementById('slide_image').src = images[0]; slideCount = 0 } }) prev.addEventListener('click', function () { slideCount--; if (slideCount >= 0) { document.getElementById('slide_image').src = images[slideCount]; } else { document.getElementById('slide_image').src = images[images.length - 1]; slideCount = images.length - 1 } }) setInterval(() => { slideCount++; if (slideCount < images.length) { document.getElementById('slide_image').src = images[slideCount]; } else { document.getElementById('slide_image').src = images[0]; slideCount = 0 } }, 1000);
では上記のコードについて詳しく解説します。
「スライドショーで使う画像を変数の配列に格納する」→「ボタン用の変数を作成する」→「進行ボタンにクリックイベントを設定する」→「後退ボタンにクリックイベントを設定する」→「自動スライドを作成する」の順に実装方法を紹介します。
スライドショーで使う画像を変数の配列に格納する
const images = ['img/image1.jpg', 'img/image2.jpg', 'img/image3.jpg', 'img/image4.jpg', 'img/image5.jpg']; let slideCount = 0;
まずはスライドで使う複数の画像を変数の配列に格納します。そしてスライドショーを実装する際に使うカウント用の変数も作成します。
ボタン用の変数を作成する
const next = document.querySelector('.change_btn_right'); const prev = document.querySelector('.change_btn_left');
今回、作成するスライドショーはボタンをクリックすると動くスライドショーです。ボタンは進行用のボタンと後退用のボタンがあります。それぞれのボタンのクラスを「document.querySelector」で取得して変数に格納します。
進行ボタンにクリックイベントを設定する
next.addEventListener('click', function () { slideCount++; if (slideCount < images.length) { document.getElementById('slide_image').src = images[slideCount]; } else { document.getElementById('slide_image').src = images[0]; slideCount = 0 } })
進行ボタンの変数を作成したら、クリックイベントを設定しましょう。
next.addEventListener('click', function () { slideCount++;
クリックイベントなので「addEventListener(‘click’)」を使います。その後にカウント用の変数:slideCountに「++」を付けて、カウントを1つ増やせるようにします。カウントを1つ増やすことで、画像を一枚スライドさせて表示できます。
if (slideCount < images.length) { document.getElementById('slide_image').src = images[slideCount]; }
スライド用のカウントの数が、スライド画像の総数よりも少ないという条件を作ることで、スライド画像の総数を上限としたスライドショーが作成できます。スライドの総数を超えてしまうと、表示する画像がなくなってしまいます。それを防ぐための条件ですね。
そして「document.getElementById(‘slide_image’).src」に、「images[slideCount]」の値を代入しています。
さきほどの画像の配列に複数の画像のソースを配置しましたが、これがimages[slideCount]と関連しています。例えばカウント用の変数:slideCountが1なら、imagesの配列にある2番目の画像が表示されます。
後退ボタンにクリックイベントを設定する
prev.addEventListener('click', function () { slideCount--; if (slideCount >= 0) { document.getElementById('slide_image').src = images[slideCount]; } else { document.getElementById('slide_image').src = images[images.length - 1]; slideCount = images.length - 1 } })
進行ボタンだけではなく、スライドを巻き戻す用の後退ボタンも作成しましょう。
prev.addEventListener('click', function () { slideCount--;
進行ボタンでは「++」で画像をスライドさせていましたが、後退ボタンでスライドを巻き戻すには「–」で数値を引きます。
if (slideCount >= 0) { document.getElementById('slide_image').src = images[slideCount]; } else { document.getElementById('slide_image').src = images[images.length - 1]; slideCount = images.length - 1 }
後退ボタンの条件分岐ですが、カウント用の変数の数値が0以上という条件を設定しています。これはelse文で-1以下の設定をしたいからです。
なぜこのような設定にしたかというと、最初のスライド画像の後退ボタンを押すと、slideCountの値が-1になり最後のスライド画像が表示されないからです。slideCountの数値を画像の配列の順番と関連させていますが、-1のような負の要素は配列内にないので画像情報を取得できません。
そのためslideCountには、「images.length – 1」という配列の最後に値する数値を格納しています。これによって、最初のスライド画像の後退ボタンをクリックすると、最後のスライド画像が表示されます。
自動スライドを作成する
setInterval(() => { slideCount++; if (slideCount < images.length) { document.getElementById('slide_image').src = images[slideCount]; } else { document.getElementById('slide_image').src = images[0]; slideCount = 0 } }, 1000);
これまでボタンでスライドが動く、スライドショーを作成してきましたが、自動でスライドショーが動くようにも実装します。
setInterval(() => { 【省略】 }, 1000);
自動に処理を実行させるためには、「setInterval(() => { (処理) }, 数値);を使います。setIntervalは数値を設定することで、その数値の時間ごとに処理が実行するメソッドになります。
今回は1000ミリ秒で設定しているので、1秒ごとにスライドが動くようにしています。
GIV株式会社は、埼玉県川越市にあるWEB(ホームページ)制作会社です。お困りごと、ご相談、お気軽にご連絡ください。お問い合わせは、こちらから。