• 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(ホームページ)制作会社です。お困りごと、ご相談、お気軽にご連絡ください。お問い合わせは、こちらから。

GIV / Design / Security / People
お問い合わせ
Contact