フェードで切り替わるスライダーを作る方法【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-slider_area">

    <!-- 前の画像へ移動するボタン -->
    <button class="fade-slider_button fade-slider_prev" type="button" aria-label="前の画像">

      <svg viewBox="0 0 24 24" aria-hidden="true">
        <path d="M15 18l-6-6 6-6"></path>
      </svg>

    </button>

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

      <!--
        【画像の設定方法】
        スライダーで使用する画像はZIPに含まれていません。
        sampleフォルダ内にimagesフォルダを作成し、
        image1.png〜image3.pngを配置してください。
      -->

      <!-- 1枚目の画像 -->
      <img
        class="fade-slider_image is-active"
        src="images/image1.png"
        alt="1枚目の画像">

      <!-- 2枚目の画像 -->
      <img
        class="fade-slider_image"
        src="images/image2.png"
        alt="2枚目の画像">

      <!-- 3枚目の画像 -->
      <img
        class="fade-slider_image"
        src="images/image3.png"
        alt="3枚目の画像">

    </div>

    <!-- 次の画像へ移動するボタン -->
    <button class="fade-slider_button fade-slider_next" type="button" aria-label="次の画像">

      <svg viewBox="0 0 24 24" aria-hidden="true">
        <path d="M9 6l6 6-6 6"></path>
      </svg>

    </button>

  </div>

  <!-- 画像選択用ドット -->
  <div class="fade-slider_dots" aria-label="画像を選択">

    <button class="fade-slider_dot is-active" type="button" aria-label="1枚目の画像"></button>

    <button class="fade-slider_dot" type="button" aria-label="2枚目の画像"></button>

    <button class="fade-slider_dot" type="button" aria-label="3枚目の画像"></button>

  </div>

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

</body>
</html>

/* ページ全体 */
body{
  margin:0; /* ブラウザ標準の外側余白を削除 */
  padding:40px 20px; /* 上下40px・左右20px。値を大きくすると画面端との間隔が広がる */
  background:#ffffff; /* ページ全体の背景色 */
}

/* スライダー本体 */
.fade-slider_area{
  display:flex; /* ボタンと画像を横方向へ並べる */
  align-items:center; /* 上下中央へ揃える */
  width:100%; /* 設置した場所の横幅いっぱいに表示 */
  gap:18px; /* ボタンと画像の間隔。値を大きくすると間隔が広がる */
  box-sizing:border-box; /* 横幅の計算を安定させる */
}

/* 前後ボタン */
.fade-slider_button{
  display:flex; /* SVGを中央へ配置する */
  flex:0 0 48px; /* ボタンの横幅を48pxに固定。値を変更すると横幅が変わる */
  align-items:center; /* SVGを上下中央へ配置 */
  justify-content:center; /* SVGを左右中央へ配置 */
  width:48px; /* ボタンの横幅。値を大きくするとボタンが大きくなる */
  height:48px; /* ボタンの高さ。値を大きくするとボタンが大きくなる */
  padding:0; /* ボタン内側の余白を削除 */
  border:0; /* 標準の枠線を削除 */
  border-radius:50%; /* 円形のボタンにする */
  background:#2563eb; /* ボタンの背景色 */
  color:#ffffff; /* SVG矢印の色 */
  cursor:pointer; /* マウスを乗せたときポインターを表示 */
}

/* 操作できないボタン */
.fade-slider_button:disabled{
  background:#cbd5e1; /* 操作できないボタンの背景色 */
  cursor:default; /* 通常のカーソルへ戻す */
}

/* ボタン内のSVG */
.fade-slider_button svg{
  width:24px; /* SVGの横幅。値を大きくすると矢印が大きくなる */
  height:24px; /* SVGの高さ。値を大きくすると矢印が大きくなる */
  fill:none; /* SVG内部を塗りつぶさない */
  stroke:currentColor; /* colorで指定した色を使用 */
  stroke-width:2; /* 矢印線の太さ。値を大きくすると太くなる */
  stroke-linecap:round; /* 線の端を丸くする */
  stroke-linejoin:round; /* 線の接続部分を丸くする */
}

/* 画像表示エリア */
.fade-slider_view{
  position:relative; /* 画像を重ねて配置する基準 */
  flex:1; /* ボタン以外の横幅を使用 */
  aspect-ratio:16 / 9; /* 画像表示領域を16:9にする */
  overflow:hidden; /* 表示領域からはみ出した部分を隠す */
  border-radius:16px; /* 画像の角丸。値を大きくすると丸みが強くなる */
  background:#e5e7eb; /* 画像読み込み前の背景色 */
}

/* 各画像 */
.fade-slider_image{
  position:absolute; /* 同じ位置へ画像を重ねる */
  inset:0; /* 上下左右0の位置へ配置 */
  display:block; /* 画像下の余白をなくす */
  width:100%; /* 表示領域の横幅いっぱいに表示 */
  height:100%; /* 表示領域の高さいっぱいに表示 */
  object-fit:cover; /* 縦横比を維持しながら表示領域を埋める */
  opacity:0; /* 通常は画像を非表示 */
  transition:opacity .5s ease; /* 0.5秒で透明度を切り替える。値を大きくするとゆっくり、小さくすると速くなる */
  pointer-events:none; /* 非表示画像への操作を無効にする */
}

/* 表示中の画像 */
.fade-slider_image.is-active{
  opacity:1; /* 表示中の画像を見える状態にする */
  pointer-events:auto; /* 表示中の画像への操作を有効にする */
}

/* ドット全体 */
.fade-slider_dots{
  display:flex; /* ドットを横方向へ並べる */
  justify-content:center; /* ドットを中央へ配置 */
  gap:10px; /* ドット同士の間隔。値を大きくすると広がる */
  margin-top:24px; /* 画像との間隔。値を大きくすると広がる */
}

/* 各ドット */
.fade-slider_dot{
  width:12px; /* ドットの横幅。値を大きくするとドットが大きくなる */
  height:12px; /* ドットの高さ。値を大きくするとドットが大きくなる */
  padding:0; /* 内側余白を削除 */
  border:0; /* 標準の枠線を削除 */
  border-radius:50%; /* 円形にする */
  background:#cbd5e1; /* 通常時のドット色 */
  cursor:pointer; /* クリックできることを示す */
}

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

/* 画面幅640px以下 */
@media (max-width:640px){

  /* ページ全体 */
  body{
    padding:24px 12px; /* スマートフォンでは画面端の余白を小さくする */
  }

  /* スライダー本体 */
  .fade-slider_area{
    gap:8px; /* スマートフォンではボタンと画像の間隔を狭くする */
  }

  /* 前後ボタン */
  .fade-slider_button{
    flex-basis:42px; /* スマートフォンではボタンの横幅を42pxにする */
    width:42px; /* スマートフォンでのボタン横幅 */
    height:42px; /* スマートフォンでのボタン高さ */
  }

  /* ボタン内のSVG */
  .fade-slider_button svg{
    width:22px; /* スマートフォンでのSVG横幅 */
    height:22px; /* スマートフォンでのSVG高さ */
  }

}

/* スライダーで使用する要素を取得 */
const sliderArea = document.querySelector('.fade-slider_area');
const images = sliderArea.querySelectorAll('.fade-slider_image');
const dots = document.querySelectorAll('.fade-slider_dot');
const prevButton = sliderArea.querySelector('.fade-slider_prev');
const nextButton = sliderArea.querySelector('.fade-slider_next');

/* 最初に表示する画像番号 */
let currentIndex = 0;

/* 表示する画像とドットを更新 */
function updateSlider(){

  /* 現在の画像だけ表示 */
  images.forEach((image, index) => {
    image.classList.toggle('is-active', index === currentIndex);
  });

  /* 現在の画像に対応するドットだけ選択状態にする */
  dots.forEach((dot, index) => {
    dot.classList.toggle('is-active', index === currentIndex);
  });

  /* 最初の画像では前ボタンを無効にする */
  prevButton.disabled = currentIndex === 0;

  /* 最後の画像では次ボタンを無効にする */
  nextButton.disabled = currentIndex === images.length - 1;

}

/* 前ボタンをクリック */
prevButton.addEventListener('click', () => {

  /* 最初の画像より前へ移動しない */
  if(currentIndex > 0){
    currentIndex--;
    updateSlider();
  }

});

/* 次ボタンをクリック */
nextButton.addEventListener('click', () => {

  /* 最後の画像より後ろへ移動しない */
  if(currentIndex < images.length - 1){
    currentIndex++;
    updateSlider();
  }

});

/* ドットをクリック */
dots.forEach((dot, index) => {

  dot.addEventListener('click', () => {
    currentIndex = index;
    updateSlider();
  });

});

/* 初期表示を設定 */
updateSlider();