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

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

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

<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>
* {
  margin: 0;
  padding: 0;
}

img {
  width: 100%;
}

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

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

image2

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

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

image3

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

img {
  width: 0;
}

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

.active {
  width: 80%;
}

image4

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

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

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

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

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

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

setInterval(() => {}, 2000)

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

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

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

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

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

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)

ブラウザで確認すると、

image5

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

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

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

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

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 が一つずつ増えるようにします。

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 に戻すようにします。

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 の条件が当てはまらない場合は、nextElementSiblingactiveクラスを移動します。

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)

ブラウザで確認すると、

image6

画像が次々と入れ替わるようになりました。

setInterval関数を使うと簡単にスライダーが作れるので、ぜひ試してみてください。

ブログ一覧