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

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

JavaScriptで背景画像を変えるには、要素.style.backgroundImage = "url(画像のパス)"と書くだけです。
今回のスライダーでは、各スライドのstyle属性に書いた背景画像をslides[activeSlide].style.backgroundImageで読み取り、そのままbodyのbackgroundImageに代入して、スライドと背景を同期させています。

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

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属性で背景画像をセットしておくほうが簡単に実装できます。

背景画像が切り替わらないときは、次の点を確認してください。
スライド側の背景画像をCSSファイルで指定している場合、slides[activeSlide].style.backgroundImageは空文字になります(style属性に書いた値しか読めません)。
CSS側の値を使いたい場合はgetComputedStyle(slides[activeSlide]).backgroundImageで読み取ります。
また、bodyの背景がぱっと切り替わって味気ない場合は、CSSでbody { transition: background-image 0.5s; }と書いてもbackground-imageはアニメーションしないため、半透明の疑似要素を重ねてopacityを変えるか、フェードで切り替える方法を組み合わせます。

スライダーを自作したい場合、スライダーの書き方も参考にしてみてください。
classListの付け外しやgetComputedStyleの使い方はJavaScriptでclass・styleを操作する方法に、スライドに合わせてボタンに波紋を出すなどの演出は波紋(リップル)アニメーションの作成方法にまとめています。