JavaScript

【JavaScript】画像が自動で変わるスライダーの作成方法

作成日：2021年06月15日

更新日：2021年08月05日

トップ画面でスライダーを作ってみたけれど、いざテストしてみると画像が変わらなかったこと、ありませんか？

今回は、画像が自動で変わるスライダーの作成方法を紹介します。

基本のコードは、以下になります。

html
<div class="container">
  <div class="slider-image">
    <img src="/images/image-1.jpg" alt="image-1" class="active" />
    <img src="/images/image-2.jpg" alt="image-2" />
    <img src="/images/image-3.jpg" alt="image-3" />
    <img src="/images/image-4.jpg" alt="image-4" />
    <img src="/images/image-5.jpg" alt="image-5" />
  </div>
</div>

css
* {
  margin: 0;
  padding: 0;
}

img {
  width: 100%;
}

.container {
  width: 100%;
  height: 100vh;
  position: relative;
}

.slider-image {
  display: flex;
  justify-content: center;
}

まずは、position: absolute; でスライドしたい画像を重ねます。

css
.slider-image {
  display: flex;
  justify-content: center;
  position: absolute;
}

次に、画像の横幅を 0 にして、画像を非表示にします。

css
img {
  width: 0;
}

表示したい画像のみ横幅を 80%にします。

css
.active {
  width: 80%;
}

画像の準備が整いましたので、スライダーの動作に関連する JavaScript を作ります。

まずは、index.js にquerySelectorAllでslider-imageクラスを指定します。

js
const images = document.querySelectorAll(".slider-image img");

スライダー機能を実装するために、setInterval関数を使います。

繰り返す時間は 2000 ミリ秒、つまり 2 秒ごとに繰り返すようにします。

js
const images = document.querySelectorAll(".slider-image img");

setInterval(() => {}, 2000);

setInterval関数の中に、active を取り除くコードを作ります。

js
const images = document.querySelectorAll(".slider-image img");

setInterval(() => {
  const image = document.querySelector(".slider-image .active");

  image.classList.remove("active");
}, 2000);

nextElementSiblingを使って、activeクラスを次の子要素に渡すようにします。

js
const images = document.querySelectorAll(".slider-image img");

setInterval(() => {
  const image = document.querySelector(".slider-image .active");

  image.classList.remove("active");
  image.nextElementSibling.classList.add("active");
}, 2000);

ブラウザで確認すると、

画像が次々に変わるようになりました。

今のままだと、最後の画像の後は空白になるので、最後の画像の次を最初の画像に戻るようにします。

そのために、カウンターを作成します。

まずは、カウンターの初期値をi=1にします。

js
const images = document.querySelectorAll(".slider-image img");
var i = 1;

setInterval(() => {
  const image = document.querySelector(".slider-image .active");

  image.classList.remove("active");
  image.nextElementSibling.classList.add("active");
}, 2000);

setInterval関数の中に i が一つずつ増えるようにします。

js
const images = document.querySelectorAll(".slider-image img");
var i = 1;

setInterval(() => {
  i++;

  const image = document.querySelector(".slider-image .active");

  image.classList.remove("active");
  image.nextElementSibling.classList.add("active");
}, 2000);

i の値が画像の数より多くなったら初めの画像に戻るようにします。

その際、1 の値も 1 に戻すようにします。

js
const images = document.querySelectorAll(".slider-image img");
var i = 1;

setInterval(() => {
  i++;

  const image = document.querySelector(".slider-image .active");

  image.classList.remove("active");

  if (i > images.length) {
    images[0].classList.add("active");
    i = 1;
  }

  image.nextElementSibling.classList.add("active");
}, 2000);

if の条件が当てはまらない場合は、nextElementSiblingでactiveクラスを移動します。

js
const images = document.querySelectorAll(".slider-image img");
var i = 1;

setInterval(() => {
  i++;

  const image = document.querySelector(".slider-image .active");

  image.classList.remove("active");

  if (i > images.length) {
    images[0].classList.add("active");
    i = 1;
  } else {
    image.nextElementSibling.classList.add("active");
  }
}, 2000);