コピペで完結！タブ切替 #11【サムネで大画面スライド切替できるタブ】

/* =========================
   タブ＋Swiper連動UI用CSS
   （#gallery-section にスコープ）
   ========================= */

/* スコープの親にも幅制限を与えて中央寄せ */
#gallery-section{
  max-width:640px;   /* ギャラリー全体の横幅上限を640pxに制限 */
  margin:0 auto;     /* 左右中央寄せ（autoマージンで均等配置） */
  padding:0 16px;    /* 左右に16pxの余白を追加（小画面時の見切れ防止） */
}

/* ギャラリー全体を囲むラッパー */
#gallery-section .gallery{
  max-width:640px;          /* 横幅の上限を640pxに制限 */
  margin:0 auto;            /* 左右中央寄せ */
}

/* タブボタン群のコンテナ */
#gallery-section .tabs{
  display:flex;             /* 子要素（ボタン）を横並びに配置 */
  gap:8px;                  /* タブ同士の間隔を8pxに設定 */
  margin-bottom:12px;       /* 下に余白を入れてスライダーと分離 */
}

/* 各タブボタンの基本スタイル */
#gallery-section .tabs button{
  flex:1;                   /* 全タブを均等幅に広げる */
  padding:6px;              /* ボタン内側の余白を設定 */
  border:2px solid transparent; /* 初期状態の枠線は透明 */
  border-radius:6px;        /* 角を6px丸めて柔らかい印象に */
  background:#fff;          /* 背景色は白 */
  cursor:pointer;           /* ホバー時にポインタカーソル表示 */
}

/* 選択されているタブ（aria-selected="true"） */
#gallery-section .tabs button[aria-selected="true"]{
  border-color:#0b6bff;     /* 枠線を青にして強調 */
  background:#e0f0ff;       /* 背景を淡い青にして選択感を出す */
}

/* Swiper本体のコンテナ */
#gallery-section .swiper{
  width:100%;               /* 横幅を親要素いっぱいに広げる */
  border:1px solid #e5e7eb; /* 外枠に薄いグレーの線 */
  border-radius:10px;       /* 角を10px丸めてデザイン性アップ */
  overflow:hidden;          /* 枠からはみ出した要素を非表示に */
}

/* 各スライドに含まれる画像 */
#gallery-section .swiper-slide img{
  width:100%;               /* 画像をスライド幅にフィットさせる */
  height:auto;              /* アスペクト比を維持してリサイズ */
  display:block;            /* インライン要素の余白を防ぐためブロック化 */
}

<!-- =========================
     タブ＋Swiper連動UI用HTML（#gallery-section でスコープ統一）
     ========================= -->

<!-- ギャラリー全体のラッパー（スコープ親） -->
<div id="gallery-section" class="gallery">

  <!-- タブ群（クリックで対象スライドへ移動） -->
  <div class="tabs" role="tablist" aria-label="スライダー切替タブ">
    <button class="tab" role="tab" aria-selected="true"  aria-controls="slide1">画像1</button>
    <button class="tab" role="tab" aria-selected="false" aria-controls="slide2">画像2</button>
    <button class="tab" role="tab" aria-selected="false" aria-controls="slide3">画像3</button>
  </div>

  <!-- Swiper本体（スライダーの可視領域） -->
  <div class="swiper">
    <div class="swiper-wrapper">

      <!-- 各スライド（IDはタブの aria-controls と一致させる） -->
      <div class="swiper-slide" id="slide1">
        <img src="https://placehold.jp/640x360.png?text=Slide+1" alt="スライド1">
      </div>

      <div class="swiper-slide" id="slide2">
        <img src="https://placehold.jp/640x360.png?text=Slide+2" alt="スライド2">
      </div>

      <div class="swiper-slide" id="slide3">
        <img src="https://placehold.jp/640x360.png?text=Slide+3" alt="スライド3">
      </div>

    </div>
  </div>

</div>

<!-- Swiperライブラリ（CSS / JS） -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css">
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>

(function(){
  /* =========================
     タブ＋Swiper連動UI用JS
     （#gallery-section にスコープ）
     ========================= */

  // Swiperを初期化
  const swiper = new Swiper('#gallery-section .swiper',{
    loop:false               /* 無限ループは無効 */
  });

  // タブ要素を取得
  const tabs = document.querySelectorAll('#gallery-section .tab');

  // タブクリック時にスライド切替
  tabs.forEach((tab,i)=>{
    tab.addEventListener('click',()=>{
      swiper.slideTo(i);     /* 該当インデックスに移動 */
    });
  });

  // Swiper側でスライド切替が起きたときにタブを更新
  swiper.on('slideChange',()=>{
    const idx = swiper.activeIndex; /* 現在のスライド番号 */
    tabs.forEach((t,j)=>{
      t.setAttribute('aria-selected', j===idx);
    });
  });
})();