🎞️ 自動スライドショーの作り方

JavaScriptで画像を3秒ごとに切り替えるスライドショーを作ってみよう！

  • 🏖 観光・旅行サイト：おすすめスポットを自動で紹介
  • 🏪 商品紹介：新商品やセール品のバナー自動切替
  • 👶 フォトギャラリー：イベントや思い出写真の自動再生

💡 スライドショーの動きの仕組み

下記のJavaScriptコードでは,画像のパスを配列としてまとめ,
setInterval() によって数秒ごとに画像を順番に切り替える処理を実行しています。
最初の画像は1枚だけ表示されますが,ページ読み込み後に自動で次の画像へと変わっていく,自動スライドショーの基本構成です。

<script>
const images = [
  "/assets/images/sample1.jpg",
  "/assets/images/sample2.jpg",
  "/assets/images/sample3.jpg"
  // サーバー用の絶対パス（例）:
  // "https://yourdomain.com/assets/images/sample1.jpg"
];
let currentIndex = 0;

function showNextImage() {
  currentIndex = (currentIndex + 1) % images.length;
  document.getElementById("slideshow").src = images[currentIndex];
}

setInterval(showNextImage, 3000); // 3秒ごとに切り替え
</script>
👇こうなる👇
スライドショー画像

📏 画像サイズがバラバラな時の対処法

縦長・正方形など画像のサイズが異なると,画像の縦幅によって
ページ全体のレイアウト（特に下のテキスト）が動いてしまうことがあります。

そんなときは height を固定して,object-fit でトリミングまたは空白補正を使いましょう。

💡 方法1：トリミングして高さを揃える（object-fit: cover）

  • 📸 中央を基準にズーム・切り抜き
  • ✨ 見た目が揃って綺麗
  • 🪄 Instagram風の処理に近い
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>自動スライドショーのデモ</title>
  <style>
    .slideshow {
      width: 100%;
      height: 400px;
      object-fit: cover;
      border-radius: 12px;
      box-shadow: 0 0 10px rgba(0,0,0,0.2);
    }
    .container {
      max-width: 800px;
      margin: 0 auto;
      text-align: center;
      padding: 20px;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>🎞️ 自動スライドショーのデモ</h1>
    <img id="slideshow" class="slideshow" src="/assets/images/sample1.jpg" alt="スライドショー画像">
  </div>

  <script>
    const images = [
      "/assets/images/sample1.jpg",
      "/assets/images/sample2.jpg",
      "/assets/images/sample3.jpg"
    ];
    let currentIndex = 0;

    function showNextImage() {
      currentIndex = (currentIndex + 1) % images.length;
      document.getElementById("slideshow").src = images[currentIndex];
    }

    setInterval(showNextImage, 3000); // 3秒ごとに切り替え
  </script>
</body>
</html>
👇こうなる👇
犬が走るGIF

💡 方法2：上下に余白を入れて画像全体を表示（object-fit: contain）

  • 🖼 画像の端まで全て見える
  • ⬜ 空白で高さを揃える
  • 🔲 サムネイル的に見せたいときに便利

高さがバラバラの写真でもそれぞれの写真の全体が表示される

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>スライドショー（cover）</title>
  <style>
    .slideshow {
      width: 100%;
      height: 400px;
      object-fit: cover;
      border-radius: 12px;
      box-shadow: 0 0 10px rgba(0,0,0,0.2);
    }
    .container {
      max-width: 800px;
      margin: 0 auto;
      text-align: center;
      padding: 20px;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>🎞️ スライドショー（object-fit: cover）</h1>
    <img id="slideshow-cover" class="slideshow" src="/assets/images/sample1.jpg" alt="スライドショー画像">
  </div>

  <script>
    const images = [
      "/assets/images/sample1.jpg",
      "/assets/images/sample2.jpg",
      "/assets/images/sample3.jpg"
    ];
    let currentIndex = 0;

    function showNextImage() {
      currentIndex = (currentIndex + 1) % images.length;
      document.getElementById("slideshow-cover").src = images[currentIndex];
    }

    setInterval(showNextImage, 3000); // 3秒ごとに切り替え
  </script>
</body>
</html>
👇こうなる👇
犬が走るGIF

🖐 自動＋手動スライド切り替えでUXをさらに向上

スライドショーを自動で再生させるだけでなく、手動で前後に移動できるようにすることで、ユーザー自身が見たいタイミングでコントロールできる柔軟なUIになります。

以下のようなボタンを追加し、クリックで画像を切り替えることで操作性を大きく向上できます。

  • ◀️ 戻るボタンで前の画像へ
  • ▶️ 次へボタンで手動スキップ
  • ⏸ 一時停止機能もあれば完璧

これにより、ユーザーは自動再生の流れを楽しみつつ、自分のペースでスライドショーに操作を加えることができます。
特に商品紹介やフォトギャラリーなどでは、手動操作が「もっとじっくり見たい」というニーズに応えてくれます。

JavaScriptのclearInterval()とsetInterval()を使えば、一時停止や再開のロジックを簡単に実装できます。
自動再生とユーザー操作を組み合わせて、より洗練されたスライドショーUIを作りましょう！