【JavaScript】スライドショーの作り方！初心者でも簡単に実装できる！

ハック君

最初に、スライドショーを表示するためのHTML要素を作成します。例えば、スライドショー全体を囲むコンテナの要素です。

<div class="slideShow">
  <ul class="slides">
    <li class="slide"><img src="image1.jpg" alt="Image 1"></li>
    <li class="slide"><img src="image2.jpg" alt="Image 2"></li>
    <li class="slide"><img src="image3.jpg" alt="Image 3"></li>
  </ul>
  <div class="buttons">
    <button class="prevButton">Prev</button>
    <button class="nextButton">Next</button>
  </div>
</div>

UIHACK 編集長

解説

<div class=”slideShow”>：スライドショー全体を囲むコンテナの要素です。

<ul class=”slides”>：各スライドの要素です。 要素で画像を表示します。
<li class=”slide”>：各スライドの要素です。 画像を表示します。

<div class=”buttons”>：ボタンを配置するための要素です。

<button class=”prevButton”>：前のスライドを表示するためのボタンです。
<button class=”nextButton”>：次のスライドを表示するためのボタンです。

ハック君

次は、CSSの設定をするんですね。

.slideShow {
  position: relative;
  width: 100%;
}

.slides {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.slide {
  display: none;
}

.slide img {
  width: 100%;
  height: auto;
}

.buttons {
  text-align: center;
  margin-top: 10px;
}

.buttons button {
  margin: 0 5px;
  padding: 5px 10px;
  font-size: 14px;
}

UIHACK 編集長

解説

CSSは、.buttons button ：位置の調整をしているよ。後は、説明不要かな。

ハック君

編集長(・vv・) 問題のJavascriptが(ｏ･ω･ｏ）ﾎｴ?

const slideShow = function() {
  const slides = document.querySelectorAll('.slideShow .slide');
  const prevButton = document.querySelector('.slideShow .prevButton');
  const nextButton = document.querySelector('.slideShow .nextButton');

  let currentIndex = 0;

  function showSlide(index) {
    if (index < 0) {
      currentIndex = slides.length - 1;
    } else if (index >= slides.length) {
      currentIndex = 0;
    }

    for (let i = 0; i < slides.length; i++) {
      if (i === currentIndex) {
        slides[i].style.display = 'block';
      } else {
        slides[i].style.display = 'none';
      }
    }
  }

  function showNextSlide() {
    currentIndex++;
    showSlide(currentIndex);
  }

  function showPrevSlide() {
    currentIndex--;
    showSlide(currentIndex);
  }

  prevButton.addEventListener('click', showPrevSlide);
  nextButton.addEventListener('click', showNextSlide);

  // 最初のスライドを表示
  showSlide(currentIndex);
};

slideShow();

UIHACK 編集長

解説

slideShow 関数：スライドショーの動作を定義します。
slides 変数：スライド要素のリストを取得します。
prevButton 変数：前のスライドを表示するためのボタンを取得します。
nextButton 変数：次のスライドを表示するためのボタンを取得します。
currentIndex 変数：現在表示されているスライドのインデックスを保持します。
showSlide 関数：指定されたインデックスのスライドを表示します。
showNextSlide 関数：次のスライドを表示します。
showPrevSlide 関数：前のスライドを表示します。
addEventListener メソッド：ボタンにクリックイベントを追加します。
showSlide(currentIndex)：初期状態で最初のスライドを表示します。

ハック君

最初に、スライドショーを表示するためのHTML要素を作成します。例えば、要素を使用してスライドショーのコンテナを作成します。

<div id="slideshow">
  <img src="image1.jpg" alt="Slide 1">
  <img src="image2.jpg" alt="Slide 2">
  <img src="image3.jpg" alt="Slide 3">
</div>

UIHACK 編集長

解説

<div id=”slideshow”>：スライドショーのコンテナを表す
<img src=”指定したい画像のパス“>：スライドショーの各画像を表す要素です。
src属性には表示する画像のファイルパスを指定し、alt属性には画像の代替テキストを設定します。

ハック君

スライドショーのスタイルを設定するためにCSSを使用します。必要に応じて、スライドショーのコンテナや画像のサイズ、表示位置、トランジション効果などを指定します。

#slideshow {
  position: relative;
  width: 100%;
  height: 400px;
  overflow: hidden;
}

#slideshow img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

#slideshow img.active {
  opacity: 1;
}

UIHACK 編集長

解説
#slideshowはスライドショーのコンテナ要素を指定するCSSセレクタです。
widthとheightはコンテナの幅と高さを指定します。
overflow: hidden;はコンテナからはみ出した部分を非表示にします。

#slideshow imgはスライドショー内の画像要素を指定するCSSセレクタです。
position: absolute;は親要素に対して絶対的な位置を設定し、topとleftで位置を調整します。

transition: opacity 0.5s ease-in-out;は画像のフェードイン・フェードアウトのトランジション効果を指定します。

#slideshow img.activeは現在表示されている画像を指定するCSSセレクタです。

opacity: 1;は画像を不透明にし、表示します。

ハック君

JavaScriptを使用してスライドショーの動作を制御します。以下の手順を参考にしてください。

// スライドショーの画像要素を取得
const slideshow = document.getElementById('slideshow');
const slides = slideshow.getElementsByTagName('img');
const slideCount = slides.length;
let currentIndex = 0;

// 最初の画像にactiveクラスを追加
slides[currentIndex].classList.add('active');

// 一定の時間間隔で画像を切り替えるタイマーを設定
setInterval(() => {
  // 現在の画像を非表示にする
  slides[currentIndex].classList.remove('active');
  // 次の画像のインデックスを計算
  currentIndex = (currentIndex + 1) % slideCount;
  // 次の画像を表示する
  slides[currentIndex].classList.add('active');
}, 3000); // 3秒ごとに切り替える（適宜時間を調整

UIHACK 編集長

解説

const slideshow = document.getElementById(‘slideshow’);は、HTMLからスライドショーのコンテナ要素を取得します。

const slides = slideshow.getElementsByTagName(‘img’);は、スライドショー内の全ての画像要素を取得します。
const slideCount = slides.length;は、画像の総数を取得します。
let currentIndex = 0;は、現在表示されている画像のインデックスを管理するための変数です。

slides[currentIndex].classList.add(‘active’);は、最初の画像にactiveクラスを追加し、表示します。

setInterval(() => {…}, 3000);は、3秒ごとに画像を切り替えるためのタイマーを設定します。
タイマーが発火するたびに、現在表示されている画像を非表示にし、次の画像に切り替えて表示します。インデックスの更新は、ループするように (currentIndex + 1) % slideCount で行います。

ブラウザの開発者ツールを開き、コンソールタブでエラーメッセージを確認します。エラーメッセージはスクリプトの実行に問題があることを示している場合があります。エラーメッセージを解析し、修正が必要な箇所を特定します。

スライドショーに関連するHTML要素が正しく配置されていることを確認します。必要な要素（スライドのコンテナ、スライドのアイテム、ボタンなど）が存在し、正しいクラス名やIDが指定されているかを確認します。

JavaScriptファイルが正しい順序で読み込まれていることを確認します。スライドショーのJavaScriptコードは、HTML要素が読み込まれた後に実行される必要があります。通常は、HTMLの最後のbodyタグの直前にスクリプトを配置することが推奨されます。

スライドショーのボタンなどの要素に正しいイベントリスナーが設定されていることを確認します。ボタンがクリックされたときに正しい関数が呼び出されるようになっているかを確認します。

スライドショーに関連するCSSのスタイルが適用されていることを確認します。スライドの表示位置や表示非表示の設定、アニメーションなどが正しく設定されているかを確認します。

スライドショーに表示する画像やデータが正しいURLや形式で指定されているかを確認します。画像のパスが正しく指定されているか、データが正しいフォーマットで提供されているかを確認します。

JavaScriptのコードをデバッグして問題を特定します。コンソールログの追加や、ステップ実行などのデバッグ手法を使用して、コードの特定の部分が予期しない結果を返していないかを確認します。