【JavaScript】背景画像も変化するスライダーの作成方法

2022年5月7日JavaScript

JavaScriptで背景画像も変化するスライダーの作成方法を紹介します。

背景画像も変化するスライダーのデモ

See the Pen
JavaScript-背景スライダー by Sosak (@Sosak2021)
on CodePen.

JavaScriptコードの解説

  const body = document.body;
  const slides = document.querySelectorAll(".slide");
  const leftBtn = document.getElementById("left");
  const rightBtn = document.getElementById("right");
  
  // 初期化
  let activeSlide = 0;
  
  rightBtn.addEventListener("click", () => {
    // 右に進む
    activeSlide++;
  // 最後のスライドに行ったら最初に戻す
    if (activeSlide > slides.length - 1) {
      activeSlide = 0;
    }
  
    setBgToBody();
    setActiveSlide();
  });
  
  leftBtn.addEventListener("click", () => {
    activeSlide--;
  
  //   最初のスライドに行ったら最後に戻す
    if (activeSlide < 0) { activeSlide = slides.length - 1; } setBgToBody(); setActiveSlide(); }); setBgToBody(); // 背景をセットする function setBgToBody() { body.style.backgroundImage = slides[activeSlide].style.backgroundImage; } // アクティブなスライドを決定する function setActiveSlide() { slides.forEach((slide) => slide.classList.remove("is-active"));
  
    slides[activeSlide].classList.add("is-active");
  }
  
  

スライダーは、スライドとなる要素をすべて取得して、
それにindex番号と紐づく変数によって、変化させることができます。
上のようにactiveSlideという変数をスライダーのindexと紐付けるとすると、
activeSlideの値を増やせば次のスライドになり、減らせば前のスライドになります。
スライドの変化はボタンが押されたときに起きるので、ボタンにクリックイベントを付与します。
その中で、まずはactiveSlideの数値を変化させ、その結果によって生じる細かい動きを設定します。
スライド数には限りがあるので、その上限や下限にactiveSlideの値が一致したとき、どうするかを指定します。
また、コンテナー（上の場合はbody要素）の背景画像は、スライドのstyle属性から取得して表示させることができます。スタイルシードをJavaScriptで操作できなくもないですが、大変なので、htmlにstyle属性で背景画像をセットする方が簡単に実装できます。

スライダーを自作したい場合、スライダーの書き方も参考にしてみてください。