フェードで切り替わるカルーセルを作る方法【HTML/CSS/JavaScript・サンプルコード付き】

フェードで切り替わるカルーセルを作る方法

フェードで切り替わるカルーセルをHTML・CSS・JavaScriptで作る方法を紹介します。左右へスライドするのではなく、現在のスライドが徐々に消えながら次のスライドが表示されるため、落ち着いた印象のカルーセルを簡単に実装できます。トップページのメインビジュアルやキャンペーン告知、おすすめコンテンツの紹介など、さまざまな場面で利用しやすいデザインです。

このサンプルでは、フェードアニメーションによるスライド切り替えに加え、左右の矢印ボタンとドットナビゲーションを実装しています。ボタンやドットをクリックすると任意のスライドへ切り替えられ、現在表示中のスライドも分かりやすく表示されます。特別なライブラリは使用せず、HTML・CSS・JavaScriptだけで動作します。

カルーセルの文章やボタン、背景色は自由に変更できるため、企業サイトやサービス紹介ページ、ランディングページなどにもそのまま応用できます。フェードで自然に切り替わるカルーセルを作りたい方や、シンプルな実装方法を探している方におすすめのサンプルです。

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

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

デモ

新しいサービスを紹介

フェードアニメーションで自然に切り替わるカルーセルです。トップページのメインビジュアルにも利用できます。

詳しく見る

おすすめ情報を表示

スライド移動ではなく、徐々に切り替わるため落ち着いた印象のデザインになります。

詳細を見る

キャンペーンを告知

左右の矢印やドットナビから任意のスライドへ切り替えられます。

確認する

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

<!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="fade-carousel_demo">

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

      <!-- スライド1 -->
      <div class="fade-carousel_slide is-active">

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

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

          <!-- 説明文 -->
          <p>
            フェードアニメーションで自然に切り替わるカルーセルです。トップページのメインビジュアルにも利用できます。
          </p>

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

        </div>

      </div>

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

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

          <!-- タイトル -->
          <div class="fade-carousel_title">
            おすすめ情報を表示
          </div>

          <!-- 説明文 -->
          <p>
            スライド移動ではなく、徐々に切り替わるため落ち着いた印象のデザインになります。
          </p>

          <!-- ボタン -->
          <a href="#" class="fade-carousel_btn">
            詳細を見る
          </a>

        </div>

      </div>

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

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

          <!-- タイトル -->
          <div class="fade-carousel_title">
            キャンペーンを告知
          </div>

          <!-- 説明文 -->
          <p>
            左右の矢印やドットナビから任意のスライドへ切り替えられます。
          </p>

          <!-- ボタン -->
          <a href="#" class="fade-carousel_btn">
            確認する
          </a>

        </div>

      </div>

      <!-- 前へボタン -->
      <button class="fade-carousel_arrow fade-carousel_prev" type="button">
        ‹
      </button>

      <!-- 次へボタン -->
      <button class="fade-carousel_arrow fade-carousel_next" type="button">
        ›
      </button>

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

        <!-- 1枚目 -->
        <button class="fade-carousel_dot is-active" type="button"></button>

        <!-- 2枚目 -->
        <button class="fade-carousel_dot" type="button"></button>

        <!-- 3枚目 -->
        <button class="fade-carousel_dot" type="button"></button>

      </div>

    </div>

  </div>

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

</body>
</html>

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

/* カルーセル全体 */
.fade-carousel_demo{
  max-width:1000px;  /* 最大横幅 */
  margin:40px auto;  /* 上下余白と中央寄せ */
  padding:24px;  /* 外側余白 */
  box-sizing:border-box;  /* paddingを幅に含める */
}

/* カルーセル表示エリア */
.fade-carousel_view{
  position:relative;  /* 矢印とドットの配置基準 */
  overflow:hidden;  /* はみ出しを隠す */
  border-radius:24px;  /* 角丸 */
  min-height:420px;  /* 高さ */
  box-shadow:0 16px 35px rgba(15,23,42,.12);  /* 影 */
}

/* スライド */
.fade-carousel_slide{
  position:absolute;  /* スライドを重ねる */
  inset:0;  /* 上下左右いっぱいに配置 */
  display:flex;  /* 中身を配置 */
  align-items:center;  /* 縦中央 */
  padding:56px;  /* 内側余白 */
  box-sizing:border-box;  /* paddingを幅に含める */
  opacity:0;  /* 非表示状態 */
  visibility:hidden;  /* クリック対象外にする */
  transition:opacity 1.2s ease;  /* フェード時間：1.2sを変更すると切り替え速度が変わる */
}

/* 表示中のスライド */
.fade-carousel_slide.is-active{
  opacity:1;  /* 表示状態 */
  visibility:visible;  /* 表示中だけ見える */
}

/* スライド1 */
.fade-carousel_slide:nth-child(1){
  background:linear-gradient(135deg,#2563eb,#60a5fa);  /* 背景 */
}

/* スライド2 */
.fade-carousel_slide:nth-child(2){
  background:linear-gradient(135deg,#1e40af,#3b82f6);  /* 背景 */
}

/* スライド3 */
.fade-carousel_slide:nth-child(3){
  background:linear-gradient(135deg,#0f172a,#2563eb);  /* 背景 */
}

/* テキストエリア */
.fade-carousel_content{
  max-width:460px;  /* 文章の最大横幅 */
  margin-left:72px;  /* 左矢印と重ならない余白 */
  color:#ffffff;  /* 文字色 */
}

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

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

/* ボタン */
.fade-carousel_btn{
  display:inline-flex;  /* ボタン型にする */
  justify-content:center;  /* 横中央 */
  align-items:center;  /* 縦中央 */
  width:160px;  /* 横幅 */
  height:46px;  /* 高さ */
  border-radius:999px;  /* 丸いボタン */
  background:#ffffff;  /* 背景色 */
  color:#2563eb;  /* 文字色 */
  font-weight:700;  /* 文字の太さ */
  text-decoration:none;  /* 下線を消す */
}

/* 左右矢印 */
.fade-carousel_arrow{
  position:absolute;  /* カルーセル上に配置 */
  top:50%;  /* 縦中央 */
  transform:translateY(-50%);  /* 縦位置補正 */
  width:44px;  /* 横幅 */
  height:44px;  /* 高さ */
  border:none;  /* 枠線なし */
  border-radius:50%;  /* 円形 */
  background:#ffffff;  /* 背景色 */
  color:#2563eb;  /* 矢印色 */
  font-size:24px;  /* 矢印サイズ */
  cursor:pointer;  /* カーソル */
  z-index:10;  /* スライドより前面 */
}

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

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

/* ドットナビ */
.fade-carousel_dots{
  position:absolute;  /* カルーセル下部に配置 */
  left:0;  /* 左端 */
  right:0;  /* 右端 */
  bottom:20px;  /* 下位置 */
  display:flex;  /* 横並び */
  justify-content:center;  /* 中央寄せ */
  gap:10px;  /* ドット間隔 */
  z-index:10;  /* スライドより前面 */
}

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

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

/* 画面幅が狭い場合 */
@media(max-width:600px){

  .fade-carousel_demo{
    margin:24px auto;  /* スマホ時の外側余白 */
    padding:16px;  /* スマホ時の内側余白 */
  }

  .fade-carousel_view{
    min-height:360px;  /* スマホ時の高さ */
  }

  .fade-carousel_slide{
    padding:48px 24px;  /* スマホ時の内側余白 */
  }

  .fade-carousel_content{
    margin-left:48px;  /* スマホ時の左余白 */
  }

  .fade-carousel_title{
    font-size:28px;  /* スマホ時のタイトルサイズ */
  }

}

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

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

// 前へボタンを取得
const fadeCarouselPrev = document.querySelector(".fade-carousel_prev");

// 次へボタンを取得
const fadeCarouselNext = document.querySelector(".fade-carousel_next");

// 現在表示中のスライド番号
let fadeCarouselCurrent = 0;

// フェード切り替え中かどうか
let fadeCarouselIsChanging = false;

// フェード時間
// 1200 = 1.2秒
// CSSの transition:opacity 1.2s ease; と同じ数値にする
// 数値を大きくするとゆっくり切り替わる
// 数値を小さくすると速く切り替わる
const fadeCarouselSpeed = 1200;

// スライドを表示する
function fadeCarouselShow(index){

  // フェード中の連打を防ぐ
  if(fadeCarouselIsChanging){
    return;
  }

  // 最初より前なら最後へ移動
  if(index < 0){
    index = fadeCarouselSlides.length - 1;
  }

  // 最後より後なら最初へ移動
  if(index >= fadeCarouselSlides.length){
    index = 0;
  }

  // 同じスライドなら何もしない
  if(index === fadeCarouselCurrent){
    return;
  }

  // フェード中にする
  fadeCarouselIsChanging = true;

  // すべてのスライドを非表示
  fadeCarouselSlides.forEach(function(slide){
    slide.classList.remove("is-active");
  });

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

  // 指定したスライドを表示
  fadeCarouselSlides[index].classList.add("is-active");

  // 指定したドットを選択状態にする
  fadeCarouselDots[index].classList.add("is-active");

  // 現在の番号を更新
  fadeCarouselCurrent = index;

  // フェード時間が終わったら連打防止を解除
  setTimeout(function(){
    fadeCarouselIsChanging = false;
  }, fadeCarouselSpeed);

}

// 次へボタンを押した時の処理
fadeCarouselNext.addEventListener("click", function(){
  fadeCarouselShow(fadeCarouselCurrent + 1);
});

// 前へボタンを押した時の処理
fadeCarouselPrev.addEventListener("click", function(){
  fadeCarouselShow(fadeCarouselCurrent - 1);
});

// ドットを押した時の処理
fadeCarouselDots.forEach(function(dot,index){

  dot.addEventListener("click", function(){
    fadeCarouselShow(index);
  });

});

コードをコピーする場合 使用するコードのタブを選び、「このタブをコピー」をクリックすると、現在表示中のコードをコピーできます。
サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。

ファイル構成と設置方法

このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。HTMLではカルーセルのレイアウトやスライド、矢印ボタン、ドットナビゲーションを配置し、CSSではフェードアニメーションやレイアウト、デザインを設定しています。JavaScriptでは前後のスライド切り替えやドットナビの操作、フェード中の連打防止などの処理を行います。

スライドは横へ移動するのではなく、重ねて配置した要素の表示・非表示を切り替えることで自然なフェードアニメーションを実現しています。トップページのメインビジュアルやお知らせ、キャンペーン紹介など、落ち着いた印象のカルーセルを簡単に作成できます。

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

各ファイルの役割
index.htmlはカルーセル全体を構成するファイルです。各スライドのタイトル、説明文、ボタンの文字、スライド数を変更できます。矢印ボタンやドットナビゲーションもこのファイルで管理します。

style.cssはカルーセル全体のデザインを設定するファイルです。背景色、文字色、カードデザイン、角丸、影、余白、フェードアニメーション、レスポンシブ表示などを変更できます。

script.jsはカルーセルの動作を制御するファイルです。前へ・次へボタン、ドットナビの切り替え、表示中スライドの管理、フェード中の連打防止を行います。

設置方法・使い方
sampleフォルダへindex.html、style.css、script.jsを配置します。3つのファイルを同じ階層へ保存したあと、sample/index.htmlをブラウザで開いてください。左右の矢印ボタンやドットナビゲーションをクリックすると、各スライドがフェードアニメーションで切り替わります。

カスタマイズできる内容
index.htmlではスライドのタイトル、説明文、ボタンの文字、リンク先、スライド数を変更できます。サービス紹介やキャンペーン、お知らせなど用途に合わせた内容へ簡単に変更できます。

style.cssではカルーセル全体の横幅、高さ、背景色、文字色、余白、角丸、影、ボタンデザイン、ドットナビの見た目、フェード時間などを変更できます。

script.jsではフェード時間に合わせた待機時間や連打防止時間、スライド切り替え処理などを調整できます。

数値調整
style.css
max-width:1000px;
カルーセル全体の最大横幅です。値を大きくすると横幅が広くなり、小さくするとコンパクトになります。

min-height:420px;
カルーセルの高さです。値を大きくすると縦方向へ広がり、小さくすると低く表示されます。

padding:56px;
スライド内側の余白です。値を大きくすると余白が広がり、小さくすると内容が端へ近付きます。

transition:opacity 1.2s ease;
フェード切り替え時間です。1.2秒かけて切り替わります。値を大きくするとゆっくり、小さくすると速く切り替わります。

margin-left:72px;
テキストと左矢印との間隔です。値を大きくすると余白が広がり、小さくすると矢印へ近付きます。

font-size:38px;
タイトル文字サイズです。値を大きくするとタイトルが強調され、小さくすると控えめになります。

width:160px;
ボタンの横幅です。値を大きくするとボタンが横長になり、小さくすると短くなります。

width:44px;
左右矢印ボタンの大きさです。値を大きくすると押しやすくなり、小さくするとコンパクトになります。

script.js
const fadeCarouselSpeed = 1200;
フェード切り替え時間です。1200は1.2秒を表します。CSSのtransition時間と同じ値にしてください。値を大きくするとゆっくり、小さくすると速く切り替わります。

レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのmax-width:1000pxにより画面幅に合わせてカルーセル全体が縮小されます。また、600px以下では内側余白、タイトルサイズ、高さ、テキスト位置を調整しているため、スマートフォン・タブレット・PCでも見やすく利用できます。