HTML・CSS・JavaScriptでシンプルなスライドショーを作成する方法

Webページに動きを加えたいときに便利なのが「スライドショー」です。画像やコンテンツを自動で切り替えることで、見た目にインパクトを与えることができます。この記事では、HTML、CSS、そしてJavaScriptを使って、シンプルかつ実用的なスライドショーを作る方法を解説します。初心者の方にもわかりやすく、コピペで使えるコード付きで紹介しているので、ぜひ自分のWebサイトに取り入れてみてください。

HTMLでスライドショーの構造を作る

まずはスライドショーの骨組みとなるHTMLを作成します。今回は3枚の画像が順番に切り替わるスライドショーを想定します。
以下が基本的なHTML構造です。

<div class="slideshow-container">
  <div class="slide fade">
    <img src="image1.jpg" alt="画像1">
  </div>
  <div class="slide fade">
    <img src="image2.jpg" alt="画像2">
  </div>
  <div class="slide fade">
    <img src="image3.jpg" alt="画像3">
  </div>
</div>

ポイントは.slideというクラスで各スライドを定義し、全体を.slideshow-containerで囲っている点です。この構造がCSSとJavaScriptでの制御の基礎になります。

CSSでスタイルとアニメーションを設定する

次に、スライドショーを見た目よく表示するためのCSSを設定します。以下のように記述しましょう。

.slideshow-container {
  position: relative;
  width: 100%;
  max-width: 600px;
  margin: auto;
  overflow: hidden;
}

.slide {
  display: none;
  position: absolute;
  width: 100%;
}

.slide img {
  width: 100%;
  vertical-align: middle;
}

.fade {
  animation-name: fade;
  animation-duration: 1s;
}

@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

ここでのポイントは.slideクラスにdisplay: noneを設定し、JavaScriptで表示するスライドだけをdisplay: blockに切り替えるようにしている点です。fadeクラスでフェードインの効果も付け加えています。

JavaScriptでスライドの切り替え機能を実装する

いよいよJavaScriptでスライドを切り替える動きを追加します。以下が自動でスライドが切り替わるシンプルなコードです。

let slideIndex = 0;

function showSlides() {
  let slides = document.getElementsByClassName("slide");
  
  for (let i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";  
  }

  slideIndex++;
  if (slideIndex > slides.length) {slideIndex = 1}    
  slides[slideIndex - 1].style.display = "block";  
  setTimeout(showSlides, 3000); // 3秒ごとにスライドを切り替え
}

window.onload = showSlides;

このコードは、3秒ごとにスライドを順番に表示するというシンプルな処理です。window.onloadでページ読み込み後にスライドショーが開始されるようになっています。

ボタンを使って手動で操作できるスライドショーに改良する

自動だけでなく、「次へ」「前へ」ボタンを設置して手動でスライドを切り替える機能も追加できます。

HTMLにボタンを追加：

<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>

CSSを追加：

.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  padding: 16px;
  margin-top: -22px;
  color: white;
  font-weight: bold;
  font-size: 24px;
  user-select: none;
  background-color: rgba(0,0,0,0.5);
  border-radius: 3px;
}

.prev {
  left: 0;
}

.next {
  right: 0;
}

JavaScriptを以下のように調整：

let slideIndex = 1;
showSlide(slideIndex);

function plusSlides(n) {
  showSlide(slideIndex += n);
}

function showSlide(n) {
  let slides = document.getElementsByClassName("slide");
  if (n > slides.length) {slideIndex = 1}    
  if (n < 1) {slideIndex = slides.length}
  for (let i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";  
  }
  slides[slideIndex-1].style.display = "block";  
}

このようにすることで、ユーザーが任意のタイミングでスライドを進めたり戻したりできるようになります。

よくあるエラーとその対処法

スライドが切り替わらない

  • JavaScriptのgetElementsByClassNameの戻り値はHTMLCollectionなので、forEachではなく通常のforループを使いましょう。

画像が表示されない

  • imgのsrcパスが間違っていることが多いです。相対パス・絶対パスの確認を。

スライドが重なって見える

  • .slideにposition: absoluteを指定し忘れていないか確認してください。

まとめ

HTML、CSS、JavaScriptを使えば、初心者でも十分にスライドショーを実装できます。この記事では、自動切り替え・手動切り替えの両方に対応するシンプルなスライドショーの作り方を紹介しました。まずはこの基本形をコピーして試し、慣れてきたら、スライドにテキストを重ねたり、サムネイル付きにしたりと、カスタマイズを楽しんでみてください。

タイトルとURLをコピーしました