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

フェードで切り替わるスライダーを作る方法

フェードで切り替わるスライダーをHTML・CSS・JavaScriptで作る方法を紹介します。画像が横に移動するのではなく、ふわっと重なりながら切り替わるため、落ち着いた印象のメインビジュアルやギャラリーを作りたい場合に使いやすいサンプルです。

このサンプルでは、複数の画像を同じ位置に重ねて配置し、JavaScriptで表示中の画像だけにクラスを付け替えます。CSSのopacityとtransitionを使ってフェード切り替えを行うため、シンプルなコードで自然な画像切り替えを実装できます。

画像の変更はHTML側で行い、フェード速度はCSSのtransitionで調整できます。トップページのキービジュアル、写真ギャラリー、商品イメージの切り替えなど、横スライドよりも柔らかい見せ方をしたいWebサイトにおすすめです。

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

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

デモ

このデモでは、「前へ」「次へ」ボタンをクリックすると画像がフェードしながら切り替わります。横にスライドせず、ふわっと表示が変わる動きを確認できます。

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

<!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-image-slider_demo">

    <!-- 画像表示エリア -->
    <div class="fade-image-slider_box">

      <!-- 画像1：sample/images/ に配置した画像名へ変更 -->
      <img class="fade-image-slider_image is-active" src="images/【ここに1枚目の画像ファイル名】" alt="画像1">

      <!-- 画像2：sample/images/ に配置した画像名へ変更 -->
      <img class="fade-image-slider_image" src="images/【ここに2枚目の画像ファイル名】" alt="画像2">

      <!-- 画像3：sample/images/ に配置した画像名へ変更 -->
      <img class="fade-image-slider_image" src="images/【ここに3枚目の画像ファイル名】" alt="画像3">

    </div>

    <!-- 操作ボタン -->
    <div class="fade-image-slider_controls">

      <button class="fade-image-slider_button" type="button" id="fade-image-slider-prev">
        前へ
      </button>

      <button class="fade-image-slider_button" type="button" id="fade-image-slider-next">
        次へ
      </button>

    </div>

  </div>

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

</body>
</html>

/* ページ全体 */
body{
  margin:0;  /* ページ外側の余白 */
  padding:40px 20px;  /* ページ内側の余白 */
  background:#f8fafc;  /* 背景色 */
  font-family:sans-serif;  /* フォント */
}

/* フェードスライダー全体 */
.fade-image-slider_demo{
  max-width:760px;  /* 最大横幅 */
  margin:0 auto;  /* 中央寄せ */
}

/* 画像表示エリア */
.fade-image-slider_box{
  position:relative;  /* 画像を重ねる基準 */
  overflow:hidden;  /* はみ出し非表示 */
  height:420px;  /* 高さ */
  border:1px solid #dbeafe;  /* 枠線 */
  border-radius:18px;  /* 角丸 */
  background:#ffffff;  /* 背景色 */
  box-shadow:0 10px 30px rgba(15,23,42,.08);  /* 影 */
}

/* 画像 */
.fade-image-slider_image{
  position:absolute;  /* 同じ位置に重ねる */
  inset:0;  /* 上下左右いっぱい */
  width:100%;  /* 横幅いっぱい */
  height:100%;  /* 高さいっぱい */
  object-fit:cover;  /* 枠いっぱいに表示 */
  opacity:0;  /* 通常は非表示 */
  transition:opacity .6s ease;  /* フェード速度：.6s = 0.6秒 */
}

/* 表示中の画像 */
.fade-image-slider_image.is-active{
  opacity:1;  /* 表示 */
}

/* 操作ボタン */
.fade-image-slider_controls{
  display:flex;  /* 横並び */
  justify-content:center;  /* 中央寄せ */
  gap:16px;  /* ボタン間隔 */
  margin-top:24px;  /* 上余白 */
}

/* 前へ・次へボタン */
.fade-image-slider_button{
  padding:12px 28px;  /* 内側余白 */
  border:none;  /* 枠線なし */
  border-radius:999px;  /* 丸いボタン */
  background:#2563eb;  /* 背景色 */
  color:#ffffff;  /* 文字色 */
  font-size:16px;  /* 文字サイズ */
  font-weight:700;  /* 太字 */
  cursor:pointer;  /* カーソル */
}

// 画像をすべて取得
const fadeImageSliderImages=document.querySelectorAll(".fade-image-slider_image");

// 前へボタンを取得
const fadeImageSliderPrev=document.getElementById("fade-image-slider-prev");

// 次へボタンを取得
const fadeImageSliderNext=document.getElementById("fade-image-slider-next");

// 現在表示している画像番号
let fadeImageSliderIndex=0;

// 指定した画像を表示
function fadeImageSliderShow(index){

  // 現在の画像を非表示
  fadeImageSliderImages[fadeImageSliderIndex].classList.remove("is-active");

  // 最初より前なら最後へ
  if(index<0){
    fadeImageSliderIndex=fadeImageSliderImages.length-1;

  // 最後より次なら最初へ
  }else if(index>=fadeImageSliderImages.length){
    fadeImageSliderIndex=0;

  // 通常の移動
  }else{
    fadeImageSliderIndex=index;
  }

  // 新しい画像を表示
  fadeImageSliderImages[fadeImageSliderIndex].classList.add("is-active");

}

// 前へボタンをクリック
fadeImageSliderPrev.addEventListener("click",function(){
  fadeImageSliderShow(fadeImageSliderIndex-1);
});

// 次へボタンをクリック
fadeImageSliderNext.addEventListener("click",function(){
  fadeImageSliderShow(fadeImageSliderIndex+1);
});

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

ファイル構成と設置方法

このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。HTMLではスライダー全体のレイアウトや表示する画像、操作ボタンを配置します。CSSでは画像を重ねて表示するフェードアニメーションやボタンのデザインを設定し、JavaScriptでは前へ・次へボタンを押したときに画像を切り替える処理を行います。画像はsample/imagesフォルダへ配置するだけで利用できるため、初心者でも導入しやすいフェードスライダーです。

sample/
├── index.html
├── style.css
├── script.js
└── images/
    ├── image1.jpg
    ├── image2.jpg
    └── image3.jpg

各ファイルの役割
index.htmlはスライダー全体を構成するファイルです。表示する画像、前へ・次へボタンを編集できます。画像ファイル名を変更すると表示する画像を差し替えられます。

style.cssはスライダー全体のデザインを設定するファイルです。横幅、高さ、背景色、角丸、影、フェードアニメーション、ボタンのデザインを変更できます。

script.jsは画像の切り替え処理を行うファイルです。前へ・次へボタンを押したときに表示する画像を切り替えます。

設置方法・使い方
sampleフォルダへindex.html、style.css、script.jsを配置します。表示したい画像をsample/images/へ配置し、index.htmlの画像ファイル名を実際のファイル名へ変更してください。そのあとsample/index.htmlをブラウザで開くとフェードスライダーを利用できます。前へ・次へボタンを押すと画像がフェードで切り替わります。

カスタマイズできる内容
index.htmlでは画像ファイル、画像枚数、alt属性を変更できます。用途に合わせて商品画像やバナー画像などへ差し替えて利用できます。

style.cssではスライダー全体の横幅、高さ、背景色、角丸、影、ボタンの色・サイズ・余白、フェードアニメーションの速度を変更できます。

script.jsでは前へ・次へボタンを押したときの画像切り替え処理を編集できます。

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

height:420px;
スライダーの高さです。値を大きくすると縦長になり、小さくすると高さを抑えられます。

border-radius:18px;
スライダー全体の角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。

padding:56px;
スライド内の余白です。値を大きくすると文字と画像端との間隔が広がり、小さくすると詰まった表示になります。

transition:opacity .6s ease;
フェードアニメーションの時間です。0.6秒かけて画像を切り替えます。値を大きくするとゆっくり、小さくすると速く切り替わります。

width:44px;
前へ・次へボタンの横幅です。値を大きくするとボタンが大きくなり、小さくするとコンパクトになります。

height:44px;
前へ・次へボタンの高さです。値を大きくするとボタンが大きくなり、小さくするとコンパクトになります。

bottom:20px;
ドットナビゲーションの下側余白です。値を大きくすると上へ移動し、小さくすると下へ近付きます。

レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのmax-width:760pxにより画面幅に合わせてスライダーが縮小されます。また、@media(max-width:600px)では余白、高さ、タイトルサイズを調整しているため、スマートフォン・タブレット・PCで利用できます。