ドロワーメニュー内にスライダーを表示する方法【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>

  <!-- ドロワーメニューを開くボタン -->
  <button class="drawer-carousel_open" type="button">
    メニューを開く
  </button>

  <!-- ドロワーメニュー表示時の背景 -->
  <div class="drawer-carousel_overlay"></div>

  <!-- ドロワーメニュー -->
  <div class="drawer-carousel_drawer">

    <!-- ドロワーメニューの見出し -->
    <div class="drawer-carousel_heading">
      メニュー
    </div>

    <!-- ナビゲーション -->
    <nav class="drawer-carousel_nav">

      <a class="drawer-carousel_link" href="#">
        ホーム
      </a>

      <a class="drawer-carousel_link" href="#">
        サービス
      </a>

      <a class="drawer-carousel_link" href="#">
        お知らせ
      </a>

      <a class="drawer-carousel_link" href="#">
        お問い合わせ
      </a>

    </nav>

    <!-- スライダー -->
    <div class="drawer-carousel_carousel">

      <!-- スライダーの見出し -->
      <div class="drawer-carousel_carousel-title">
        おすすめコンテンツ
      </div>

      <!-- スライダー本体 -->
      <div class="drawer-carousel_area">

        <!-- 前の画像へ移動するボタン -->
        <button
          class="drawer-carousel_button drawer-carousel_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="drawer-carousel_view">

          <!-- 横方向へ移動するトラック -->
          <div class="drawer-carousel_track">

            <!--
              使用する画像は利用者自身で用意してください。
              sampleフォルダ内にimagesフォルダを作成し、
              image1.png・image2.png・image3.pngを配置します。
              画像ファイルはZIPには含まれていません。
            -->

            <!-- 1枚目の画像 -->
            <div class="drawer-carousel_item">

              <img
                src="images/image1.png"
                alt="1枚目の画像">

            </div>

            <!-- 2枚目の画像 -->
            <div class="drawer-carousel_item">

              <img
                src="images/image2.png"
                alt="2枚目の画像">

            </div>

            <!-- 3枚目の画像 -->
            <div class="drawer-carousel_item">

              <img
                src="images/image3.png"
                alt="3枚目の画像">

            </div>

          </div>

        </div>

        <!-- 次の画像へ移動するボタン -->
        <button
          class="drawer-carousel_button drawer-carousel_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="drawer-carousel_dots" aria-label="画像を選択">

        <button
          class="drawer-carousel_dot is-active"
          type="button"
          aria-label="1枚目を表示">
        </button>

        <button
          class="drawer-carousel_dot"
          type="button"
          aria-label="2枚目を表示">
        </button>

        <button
          class="drawer-carousel_dot"
          type="button"
          aria-label="3枚目を表示">
        </button>

      </div>

    </div>

    <!-- ドロワーメニューを閉じるボタン -->
    <button class="drawer-carousel_close" type="button">
      閉じる
    </button>

  </div>

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

</body>
</html>

/* ページ全体 */
body{
  margin:0; /* ブラウザ標準の外側余白を削除 */
  padding:40px 20px; /* 上下40px・左右20px。値を大きくすると画面端との間隔が広がる */
  background:#ffffff; /* ページ全体の背景色 */
  color:#111827; /* ページ全体の基本文字色 */
  font-family:sans-serif; /* ページ全体で使用するフォント */
  box-sizing:border-box; /* paddingを横幅へ含める */
}

/* ドロワーメニューを開くボタン */
.drawer-carousel_open{
  padding:12px 26px; /* 上下12px・左右26px。値を大きくするとボタンが大きくなる */
  border:none; /* ボタンの枠線を非表示 */
  border-radius:8px; /* 角丸。値を大きくすると丸みが強くなる */
  background:#2563eb; /* ボタンの背景色 */
  color:#ffffff; /* ボタンの文字色 */
  font-size:16px; /* 文字サイズ。値を大きくすると文字が大きくなる */
  font-weight:700; /* 文字を太字にする */
  cursor:pointer; /* マウスポインターを変更 */
}

/* 背景オーバーレイ */
.drawer-carousel_overlay{
  position:fixed; /* 画面全体へ固定 */
  inset:0; /* 上下左右0で画面全体を覆う */
  z-index:9998; /* ドロワーメニューより1段下へ表示 */
  background:rgba(15,23,42,.35); /* 背景を半透明の暗色にする */
  opacity:0; /* 非表示時の透明度 */
  visibility:hidden; /* 非表示時は見えない状態にする */
  pointer-events:none; /* 非表示時のクリックを無効化 */
  transition:
    opacity .3s ease,
    visibility .3s ease;
  /*
    0.3秒でオーバーレイを切り替える。
    値を大きくすると遅くなり、小さくすると速くなる。
  */
}

/* 背景オーバーレイ表示時 */
.drawer-carousel_overlay.is-active{
  opacity:1; /* 表示時の透明度 */
  visibility:visible; /* オーバーレイを表示 */
  pointer-events:auto; /* 表示時のクリックを有効化 */
}

/* ドロワーメニュー */
.drawer-carousel_drawer{
  position:fixed; /* 画面へ固定 */
  top:0; /* 画面上端へ配置 */
  left:0; /* 画面左端へ配置 */
  z-index:9999; /* オーバーレイより前面へ表示 */
  width:420px; /* ドロワーの横幅。値を大きくすると横に広がる */
  max-width:90%; /* 画面幅に対する最大横幅。値を小さくすると画面端の余白が広がる */
  height:100vh; /* 画面の高さ全体を使用 */
  padding:32px 24px; /* 上下32px・左右24px。値を大きくすると内側余白が広がる */
  background:#ffffff; /* ドロワーの背景色 */
  box-shadow:none; /* 非表示時は影を付けない */
  transform:translateX(calc(-100% - 40px)); /* ドロワー本体の横幅＋40px分を左へ移動して隠す */
  visibility:hidden; /* 非表示時は見えない状態にする */
  pointer-events:none; /* 非表示時の操作を無効化 */
  transition:
    transform .3s ease,
    visibility .3s ease;
  /*
    0.3秒でドロワーメニューを開閉する。
    値を大きくすると遅くなり、小さくすると速くなる。
  */
  box-sizing:border-box; /* paddingを横幅へ含める */
  overflow-y:auto; /* 内容が縦に収まらない場合はスクロールできるようにする */
}

/* ドロワーメニュー表示時 */
.drawer-carousel_drawer.is-active{
  transform:translateX(0); /* 左端の表示位置へ移動 */
  visibility:visible; /* ドロワーメニューを表示 */
  pointer-events:auto; /* ドロワーメニュー内の操作を有効化 */
  box-shadow:12px 0 30px rgba(15,23,42,.18); /* 横12px・ぼかし30pxの影。値を大きくすると影が広がる */
}

/* ドロワーメニューの見出し */
.drawer-carousel_heading{
  margin:0 0 28px; /* 下側28px。値を大きくするとナビゲーションとの間隔が広がる */
  font-size:24px; /* 見出しの文字サイズ。値を大きくすると文字が大きくなる */
  font-weight:700; /* 見出しを太字にする */
}

/* ナビゲーション */
.drawer-carousel_nav{
  display:flex; /* リンクをFlexboxで配置 */
  flex-direction:column; /* リンクを縦方向へ並べる */
  gap:10px; /* リンク同士の間隔。値を大きくすると間隔が広がる */
  margin-bottom:32px; /* 下側32px。値を大きくするとスライダーとの間隔が広がる */
}

/* ナビゲーションリンク */
.drawer-carousel_link{
  display:block; /* リンク全体をクリックできるようにする */
  padding:14px 16px; /* 上下14px・左右16px。値を大きくするとリンク領域が広がる */
  border-radius:8px; /* 角丸。値を大きくすると丸みが強くなる */
  background:#f1f5f9; /* リンクの背景色 */
  color:#111827; /* リンクの文字色 */
  text-decoration:none; /* 下線を非表示 */
  font-weight:700; /* 文字を太字にする */
}

/* ナビゲーションリンクのホバー時 */
.drawer-carousel_link:hover{
  background:#e2e8f0; /* マウスを重ねたときの背景色 */
}

/* スライダー全体 */
.drawer-carousel_carousel{
  margin-bottom:28px; /* 下側28px。値を大きくすると閉じるボタンとの間隔が広がる */
}

/* スライダーの見出し */
.drawer-carousel_carousel-title{
  margin:0 0 16px; /* 下側16px。値を大きくするとスライダーとの間隔が広がる */
  font-size:18px; /* 文字サイズ。値を大きくすると文字が大きくなる */
  font-weight:700; /* 文字を太字にする */
}

/* スライダー本体 */
.drawer-carousel_area{
  display:flex; /* 前ボタン・画像・次ボタンを横並びにする */
  align-items:center; /* 縦方向の中央へ揃える */
  gap:10px; /* ボタンと画像の間隔。値を大きくすると間隔が広がる */
}

/* スライダーの前後ボタン */
.drawer-carousel_button{
  display:flex; /* アイコンを中央配置する */
  flex:0 0 40px; /* ボタンが占める横幅。値を大きくするとボタン領域が広がる */
  align-items:center; /* アイコンを縦方向の中央へ配置 */
  justify-content:center; /* アイコンを横方向の中央へ配置 */
  width:40px; /* ボタンの横幅。値を大きくするとボタンが大きくなる */
  height:40px; /* ボタンの高さ。値を大きくするとボタンが大きくなる */
  padding:0; /* ボタン内側の余白を削除 */
  border:none; /* ボタンの枠線を非表示 */
  border-radius:50%; /* 円形にする */
  background:#2563eb; /* ボタンの背景色 */
  color:#ffffff; /* 矢印の色 */
  cursor:pointer; /* マウスポインターを変更 */
}

/* 操作できないスライダーボタン */
.drawer-carousel_button:disabled{
  background:#cbd5e1; /* 無効時の背景色 */
  cursor:default; /* 通常のマウスポインターへ変更 */
}

/* スライダーボタンのSVG */
.drawer-carousel_button svg{
  width:20px; /* 矢印の横幅。値を大きくすると矢印が大きくなる */
  height:20px; /* 矢印の高さ。値を大きくすると矢印が大きくなる */
  fill:none; /* SVG内部を塗りつぶさない */
  stroke:currentColor; /* ボタンの文字色を線色として使用 */
  stroke-width:2; /* 矢印の線幅。値を大きくすると線が太くなる */
  stroke-linecap:round; /* 線の端を丸くする */
  stroke-linejoin:round; /* 線の接続部分を丸くする */
}

/* スライダー表示領域 */
.drawer-carousel_view{
  flex:1; /* 残りの横幅を使用 */
  min-width:0; /* Flexbox内で画面幅に合わせて縮小できるようにする */
  overflow:hidden; /* 表示範囲外の画像を隠す */
}

/* スライダートラック */
.drawer-carousel_track{
  display:flex; /* 画像を横方向へ並べる */
  transition:transform .4s ease; /* 0.4秒で画像を移動。値を大きくすると遅くなり、小さくすると速くなる */
}

/* 各スライド */
.drawer-carousel_item{
  flex:0 0 100%; /* 1項目を表示領域と同じ横幅にする */
  min-width:0; /* Flexbox内で縮小できるようにする */
}

/* スライダー画像 */
.drawer-carousel_item img{
  display:block; /* 画像下部の余白を防ぐ */
  width:100%; /* 表示領域の横幅いっぱいに表示 */
  aspect-ratio:16 / 9; /* 横16：縦9。比率を変更すると画像表示領域の形が変わる */
  object-fit:cover; /* 表示領域を埋めるように画像をトリミング */
  border-radius:14px; /* 画像の角丸。値を大きくすると丸みが強くなる */
}

/* スライダーのドット全体 */
.drawer-carousel_dots{
  display:flex; /* ドットを横並びにする */
  justify-content:center; /* ドットを中央へ配置 */
  gap:8px; /* ドット同士の間隔。値を大きくすると間隔が広がる */
  margin-top:16px; /* 上側16px。値を大きくすると画像との間隔が広がる */
}

/* 各ドット */
.drawer-carousel_dot{
  width:10px; /* ドットの横幅。値を大きくするとドットが大きくなる */
  height:10px; /* ドットの高さ。値を大きくするとドットが大きくなる */
  padding:0; /* 内側余白を削除 */
  border:none; /* 枠線を非表示 */
  border-radius:50%; /* 円形にする */
  background:#cbd5e1; /* 通常時の背景色 */
  cursor:pointer; /* マウスポインターを変更 */
}

/* 選択中のドット */
.drawer-carousel_dot.is-active{
  background:#2563eb; /* 選択中の背景色 */
}

/* ドロワーメニューを閉じるボタン */
.drawer-carousel_close{
  width:100%; /* ドロワーの横幅いっぱいに表示 */
  padding:12px; /* 内側余白。値を大きくするとボタンが高くなる */
  border:none; /* ボタンの枠線を非表示 */
  border-radius:8px; /* 角丸。値を大きくすると丸みが強くなる */
  background:#2563eb; /* ボタンの背景色 */
  color:#ffffff; /* ボタンの文字色 */
  font-size:16px; /* 文字サイズ。値を大きくすると文字が大きくなる */
  font-weight:700; /* 文字を太字にする */
  cursor:pointer; /* マウスポインターを変更 */
}

/* 閉じるボタンのホバー時 */
.drawer-carousel_close:hover{
  background:#1d4ed8; /* マウスを重ねたときの背景色 */
}

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

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

  /* ドロワーメニュー */
  .drawer-carousel_drawer{
    padding:24px 18px; /* 上下24px・左右18px。スマートフォンでは内側余白を小さくする */
  }

  /* スライダー本体 */
  .drawer-carousel_area{
    gap:6px; /* ボタンと画像の間隔を6pxへ縮小する */
  }

  /* スライダーの前後ボタン */
  .drawer-carousel_button{
    flex-basis:36px; /* ボタンが占める横幅を36pxへ縮小する */
    width:36px; /* ボタンの横幅を36pxへ縮小する */
    height:36px; /* ボタンの高さを36pxへ縮小する */
  }

  /* スライダーボタンのSVG */
  .drawer-carousel_button svg{
    width:18px; /* 矢印の横幅を18pxへ縮小する */
    height:18px; /* 矢印の高さを18pxへ縮小する */
  }

}

/* ドロワーメニューで使用する要素を取得 */
const drawerCarouselOpen =
  document.querySelector(".drawer-carousel_open");

const drawerCarouselClose =
  document.querySelector(".drawer-carousel_close");

const drawerCarouselDrawer =
  document.querySelector(".drawer-carousel_drawer");

const drawerCarouselOverlay =
  document.querySelector(".drawer-carousel_overlay");

/* スライダーで使用する要素を取得 */
const drawerCarouselTrack =
  document.querySelector(".drawer-carousel_track");

const drawerCarouselItems =
  document.querySelectorAll(".drawer-carousel_item");

const drawerCarouselDots =
  document.querySelectorAll(".drawer-carousel_dot");

const drawerCarouselPrev =
  document.querySelector(".drawer-carousel_prev");

const drawerCarouselNext =
  document.querySelector(".drawer-carousel_next");

/* 最初に表示する画像の番号。0は1枚目を表す */
let drawerCarouselCurrentIndex = 0;

/* ドロワーメニューを開く処理 */
function drawerCarouselOpenMenu(){

  /* ドロワーメニューを表示 */
  drawerCarouselDrawer.classList.add("is-active");

  /* 背景オーバーレイを表示 */
  drawerCarouselOverlay.classList.add("is-active");

}

/* ドロワーメニューを閉じる処理 */
function drawerCarouselCloseMenu(){

  /* ドロワーメニューを非表示 */
  drawerCarouselDrawer.classList.remove("is-active");

  /* 背景オーバーレイを非表示 */
  drawerCarouselOverlay.classList.remove("is-active");

}

/* スライダーの表示を更新する処理 */
function drawerCarouselUpdate(){

  /*
    現在の画像番号 × 100%だけトラックを左へ移動する。
    0は1枚目、1は2枚目、2は3枚目を表示する。
  */
  drawerCarouselTrack.style.transform =
    `translateX(-${drawerCarouselCurrentIndex * 100}%)`;

  /* 現在表示している画像に対応するドットを選択状態にする */
  drawerCarouselDots.forEach(function(dot,index){

    dot.classList.toggle(
      "is-active",
      index === drawerCarouselCurrentIndex
    );

  });

  /* 1枚目を表示している場合は前ボタンを無効にする */
  drawerCarouselPrev.disabled =
    drawerCarouselCurrentIndex === 0;

  /* 最後の画像を表示している場合は次ボタンを無効にする */
  drawerCarouselNext.disabled =
    drawerCarouselCurrentIndex === drawerCarouselItems.length - 1;

}

/* 開くボタンをクリックしたとき */
drawerCarouselOpen.addEventListener("click",function(){

  /* ドロワーメニューを開く */
  drawerCarouselOpenMenu();

});

/* 閉じるボタンをクリックしたとき */
drawerCarouselClose.addEventListener("click",function(){

  /* ドロワーメニューを閉じる */
  drawerCarouselCloseMenu();

});

/* 前ボタンをクリックしたとき */
drawerCarouselPrev.addEventListener("click",function(){

  /* 1枚目より前へは移動しない */
  if(drawerCarouselCurrentIndex > 0){

    /* 現在位置を1つ戻す */
    drawerCarouselCurrentIndex--;

    /* スライダーを更新 */
    drawerCarouselUpdate();

  }

});

/* 次ボタンをクリックしたとき */
drawerCarouselNext.addEventListener("click",function(){

  /* 最後の画像より先へは移動しない */
  if(
    drawerCarouselCurrentIndex <
    drawerCarouselItems.length - 1
  ){

    /* 現在位置を1つ進める */
    drawerCarouselCurrentIndex++;

    /* スライダーを更新 */
    drawerCarouselUpdate();

  }

});

/* 各ドットへクリック処理を設定 */
drawerCarouselDots.forEach(function(dot,index){

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

    /* クリックしたドットと同じ番号の画像を選択 */
    drawerCarouselCurrentIndex = index;

    /* スライダーを更新 */
    drawerCarouselUpdate();

  });

});

/* ページ読み込み時のスライダー表示を設定 */
drawerCarouselUpdate();