自動再生カルーセルを作る方法【HTML/CSS/JavaScript・サンプルコード付き】

自動再生カルーセルを作る方法を紹介します。一定時間ごとにスライドが自動で切り替わるカルーセルをHTML・CSS・JavaScriptだけで実装できるサンプルです。トップページのお知らせやおすすめ商品、キャンペーン情報などを目立たせたい場面で利用できます。

このサンプルでは、JavaScriptのsetInterval()を使用し、指定した時間ごとに次のスライドへ自動で切り替えます。左右の矢印ボタンやドットナビから手動でスライドを切り替えることもでき、基本的なカルーセルの機能を備えています。自動再生の間隔はコード内の設定値を変更するだけで簡単に調整できます。

Webサイトのメインビジュアルやおすすめ情報、お知らせ、商品紹介など、複数の内容を限られたスペースで見せたい場合に便利です。シンプルな構成なので、画像やテキストを差し替えるだけで実際のWebサイトにも導入しやすく、カルーセルの基本を学びたい方にもおすすめです。

コードについて 本記事のコードはサンプルコードです。ご利用前に必ず動作確認を行ってください。

免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。

デモ

新しいサービスを紹介

3秒ごとに自動でスライドが切り替わるカルーセルです。

詳しく見る

おすすめ情報を表示

自動再生中でも、左右の矢印から手動で切り替えできます。

詳細を見る

キャンペーンを告知

ドットナビを押すと、指定したスライドへ直接移動できます。

確認する

コードをコピーして使おう！

<!DOCTYPE html>
<html lang="ja">
<head>

  <!-- 文字コード -->
  <meta charset="UTF-8">

  <!-- スマホ表示に対応 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- ページタイトル -->
  <title>自動再生カルーセル</title>

  <!-- CSSファイルを読み込み -->
  <link rel="stylesheet" href="style.css">

</head>
<body>

  <!-- カルーセル全体 -->
  <div class="auto-carousel_wrap">

    <!-- カルーセル表示エリア -->
    <div class="auto-carousel_view">

      <!-- スライド一覧 -->
      <div class="auto-carousel_track" id="auto-carousel-track">

        <!-- スライド1 -->
        <div class="auto-carousel_slide auto-carousel_slide-1">

          <!-- テキストエリア -->
          <div class="auto-carousel_content">

            <!-- タイトル -->
            <div class="auto-carousel_heading">新しいサービスを紹介</div>

            <!-- 説明文 -->
            <p>3秒ごとに自動でスライドが切り替わるカルーセルです。</p>

            <!-- ボタン -->
            <a href="#" class="auto-carousel_link">詳しく見る</a>

          </div>

        </div>

        <!-- スライド2 -->
        <div class="auto-carousel_slide auto-carousel_slide-2">

          <div class="auto-carousel_content">

            <div class="auto-carousel_heading">おすすめ情報を表示</div>

            <p>自動再生中でも、左右の矢印から手動で切り替えできます。</p>

            <a href="#" class="auto-carousel_link">詳細を見る</a>

          </div>

        </div>

        <!-- スライド3 -->
        <div class="auto-carousel_slide auto-carousel_slide-3">

          <div class="auto-carousel_content">

            <div class="auto-carousel_heading">キャンペーンを告知</div>

            <p>ドットナビを押すと、指定したスライドへ直接移動できます。</p>

            <a href="#" class="auto-carousel_link">確認する</a>

          </div>

        </div>

      </div>

      <!-- 前へボタン -->
      <button class="auto-carousel_arrow auto-carousel_prev" id="auto-carousel-prev" type="button">‹</button>

      <!-- 次へボタン -->
      <button class="auto-carousel_arrow auto-carousel_next" id="auto-carousel-next" type="button">›</button>

      <!-- ドットナビゲーション -->
      <div class="auto-carousel_dots">

        <button class="auto-carousel_dot is-active" data-index="0" type="button" aria-label="1枚目"></button>

        <button class="auto-carousel_dot" data-index="1" type="button" aria-label="2枚目"></button>

        <button class="auto-carousel_dot" data-index="2" type="button" aria-label="3枚目"></button>

      </div>

    </div>

  </div>

  <!-- JavaScriptファイルを読み込み -->
  <script src="script.js"></script>

</body>
</html>

/* ページ全体 */
body{
  margin:0;  /* ページ外側の余白 */
  font-family:sans-serif;  /* 使用するフォント */
  background:#f8fafc;  /* ページ背景色 */
  color:#334155;  /* 基本文字色 */
}

/* カルーセル全体 */
.auto-carousel_wrap{
  max-width:1000px;  /* カルーセルの最大横幅 */
  margin:40px auto;  /* 中央配置 */
  padding:24px;  /* 外側余白 */
  box-sizing:border-box;  /* paddingを幅へ含める */
}

/* カルーセル表示エリア */
.auto-carousel_view{
  position:relative;  /* 矢印配置の基準 */
  overflow:hidden;  /* はみ出した部分を隠す */
  border-radius:24px;  /* 角丸 */
  background:#e0f2fe;  /* 背景色 */
  box-shadow:0 16px 35px rgba(15,23,42,.12);  /* 影 */
}

/* スライド一覧 */
.auto-carousel_track{
  display:flex;  /* 横並び */
  transition:transform .4s ease;  /* 切り替えアニメーション */
}

/* スライド */
.auto-carousel_slide{
  flex:0 0 100%;  /* 1枚分の横幅 */
  min-height:420px;  /* 高さ */
  padding:56px;  /* 内側余白 */
  display:flex;  /* 中央配置 */
  align-items:center;  /* 縦中央 */
  box-sizing:border-box;  /* paddingを幅へ含める */
}

/* スライド1 */
.auto-carousel_slide-1{
  background:linear-gradient(135deg,#2563eb,#dbeafe);  /* 背景 */
}

/* スライド2 */
.auto-carousel_slide-2{
  background:linear-gradient(135deg,#1e40af,#bfdbfe);  /* 背景 */
}

/* スライド3 */
.auto-carousel_slide-3{
  background:linear-gradient(135deg,#0f172a,#dbeafe);  /* 背景 */
}

/* テキストエリア */
.auto-carousel_content{
  max-width:460px;  /* 横幅 */
  margin:0 72px;  /* 左右の矢印と重ならないよう余白を確保 */
  color:#ffffff;  /* 文字色 */
}

/* タイトル */
.auto-carousel_heading{
  margin:0 0 16px;  /* 下余白 */
  font-size:38px;  /* 文字サイズ */
  font-weight:700;  /* 文字の太さ */
  line-height:1.3;  /* 行間 */
}

/* 説明文 */
.auto-carousel_content p{
  margin:0 0 24px;  /* 下余白 */
  font-size:16px;  /* 文字サイズ */
  line-height:1.8;  /* 行間 */
}

/* ボタン */
.auto-carousel_link{
  display:inline-flex;  /* ボタン化 */
  align-items:center;  /* 縦中央 */
  justify-content:center;  /* 横中央 */
  min-width:150px;  /* 横幅 */
  height:46px;  /* 高さ */
  padding:0 20px;  /* 左右余白 */
  border-radius:999px;  /* 角丸 */
  background:#ffffff;  /* 背景色 */
  color:#2563eb;  /* 文字色 */
  font-weight:700;  /* 文字の太さ */
  text-decoration:none;  /* 下線を消す */
}

/* 左右ボタン共通 */
.auto-carousel_arrow{
  position:absolute;  /* 絶対配置 */
  top:50%;  /* 縦中央 */
  width:44px;  /* 横幅 */
  height:44px;  /* 高さ */
  border:none;  /* 枠線なし */
  border-radius:50%;  /* 円形 */
  background:#ffffff;  /* 背景色 */
  color:#2563eb;  /* 文字色 */
  font-size:24px;  /* 矢印サイズ */
  font-weight:700;  /* 太字 */
  cursor:pointer;  /* マウスカーソル */
  transform:translateY(-50%);  /* 縦位置補正 */
}

/* 前へボタン */
.auto-carousel_prev{
  left:20px;  /* 左位置 */
}

/* 次へボタン */
.auto-carousel_next{
  right:20px;  /* 右位置 */
}

/* ドットナビ */
.auto-carousel_dots{
  position:absolute;  /* 絶対配置 */
  left:0;  /* 左端 */
  right:0;  /* 右端 */
  bottom:22px;  /* 下位置 */
  display:flex;  /* 横並び */
  justify-content:center;  /* 中央配置 */
  gap:10px;  /* ドット間隔 */
}

/* ドット */
.auto-carousel_dot{
  width:12px;  /* 横幅 */
  height:12px;  /* 高さ */
  border:none;  /* 枠線なし */
  border-radius:50%;  /* 円形 */
  background:rgba(255,255,255,.55);  /* 通常色 */
  cursor:pointer;  /* カーソル */
}

/* 選択中ドット */
.auto-carousel_dot.is-active{
  background:#ffffff;  /* 選択色 */
}

/* スマホ表示 */
@media (max-width:600px){

  .auto-carousel_wrap{
    margin:24px auto;  /* 外側余白 */
    padding:16px;  /* 内側余白 */
  }

  .auto-carousel_slide{
    min-height:360px;  /* 高さ */
    padding:48px 24px;  /* 内側余白 */
  }

  .auto-carousel_heading{
    font-size:28px;  /* タイトルサイズ */
  }

  .auto-carousel_arrow{
    width:38px;  /* 横幅 */
    height:38px;  /* 高さ */
    font-size:20px;  /* 矢印サイズ */
  }

}

// スライド一覧を取得
const autoCarouselTrack = document.getElementById("auto-carousel-track");

// 前へボタンを取得
const autoCarouselPrev = document.getElementById("auto-carousel-prev");

// 次へボタンを取得
const autoCarouselNext = document.getElementById("auto-carousel-next");

// ドット一覧を取得
const autoCarouselDots = document.querySelectorAll(".auto-carousel_dot");

// スライド一覧を取得
const autoCarouselSlides = document.querySelectorAll(".auto-carousel_slide");

// 現在表示中の番号
let autoCarouselCurrent = 0;

// スライド総数
const autoCarouselTotal = autoCarouselSlides.length;

// 自動再生の間隔を指定
// 3000 = 3秒
// 5000 = 5秒
// 数値を変更すると自動で切り替わる時間を調整できる
const autoCarouselIntervalTime = 3000;

// スライドを切り替える
function autoCarouselShow(index){

  // 最初より前なら最後へ
  if(index < 0){
    autoCarouselCurrent = autoCarouselTotal - 1;

  // 最後より後なら最初へ
  }else if(index >= autoCarouselTotal){
    autoCarouselCurrent = 0;

  // 通常の切り替え
  }else{
    autoCarouselCurrent = index;
  }

  // スライドを移動
  autoCarouselTrack.style.transform =
    "translateX(-" + (autoCarouselCurrent * 100) + "%)";

  // すべてのドットを通常状態へ戻す
  autoCarouselDots.forEach(function(dot){
    dot.classList.remove("is-active");
  });

  // 現在のドットを選択状態にする
  autoCarouselDots[autoCarouselCurrent].classList.add("is-active");

}

// 次のスライドへ進む
function autoCarouselNextSlide(){

  // 現在の番号から1つ進める
  autoCarouselShow(autoCarouselCurrent + 1);

}

// 指定した時間ごとに自動で次のスライドへ進める
let autoCarouselTimer = setInterval(autoCarouselNextSlide, autoCarouselIntervalTime);

// 自動再生を一度止めて、同じ時間で再開する
function autoCarouselRestartTimer(){

  // 現在の自動再生を停止
  clearInterval(autoCarouselTimer);

  // 指定した時間ごとに再び自動再生
  autoCarouselTimer = setInterval(autoCarouselNextSlide, autoCarouselIntervalTime);

}

// 前へ移動
autoCarouselPrev.addEventListener("click", function(){

  autoCarouselShow(autoCarouselCurrent - 1);

  // 手動操作後に自動再生の時間をリセット
  autoCarouselRestartTimer();

});

// 次へ移動
autoCarouselNext.addEventListener("click", function(){

  autoCarouselShow(autoCarouselCurrent + 1);

  // 手動操作後に自動再生の時間をリセット
  autoCarouselRestartTimer();

});

// ドットクリック
autoCarouselDots.forEach(function(dot){

  dot.addEventListener("click", function(){

    autoCarouselShow(Number(this.dataset.index));

    // 手動操作後に自動再生の時間をリセット
    autoCarouselRestartTimer();

  });

});

ファイル構成と設置方法

このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。HTMLでカルーセルのレイアウトを作成し、CSSでデザインを整え、JavaScriptでスライドの自動再生・左右ボタン・ドットナビの切り替え処理を行います。自動再生の時間は script.js 内の autoCarouselIntervalTime を変更するだけで簡単に調整できます。

sample/
├── index.html
├── style.css
└── script.js

sampleフォルダ内の index.html をブラウザで開くと動作を確認できます。カルーセルに表示するタイトル・説明文・ボタンのリンク先は index.html を編集してください。デザインの変更は style.css、自動再生の間隔や切り替え動作を変更したい場合は script.js の autoCarouselIntervalTime や各処理を編集してください。

自動再生カルーセルを作る方法【HTML/CSS/JavaScript・サンプルコード付き】