WordPress│サムネイル付きスライダーを作成する方法│Swiper.js

2021.03.062026.10.13

Swiperを使ったサムネイル付きギャラリーです。画像一覧をHTMLに明示し、連番のファイル名に依存しません。前後ボタンとサムネイルは通常のbutton要素なので、Tabで移動してEnterやSpaceでも操作できます。自動再生は行いません。

操作できる見本

貼り付ける場所

HTMLは記事のカスタムHTMLブロックへ、CSSは子テーマのスタイルシートまたは追加CSSへ記載します。JavaScriptはtype=”module”のscript内に記載します。本文でscriptを保存できない権限・環境では管理者に設置を依頼してください。旧Swiperの読み込み・初期化コードは重ねて使いません。

<div class="waza-thumb-gallery" aria-label="画像ギャラリー"><div class="swiper"><div class="swiper-wrapper"><div class="swiper-slide"><img src="https://motoki-design.co.jp/wordpress/wp-content/uploads/s01.jpg" alt="赤い背景にA" loading="lazy"></div><div class="swiper-slide"><img src="https://motoki-design.co.jp/wordpress/wp-content/uploads/s02.jpg" alt="青い背景にB" loading="lazy"></div><div class="swiper-slide"><img src="https://motoki-design.co.jp/wordpress/wp-content/uploads/s03.jpg" alt="緑の背景にC" loading="lazy"></div></div></div><div class="waza-gallery-controls"><button type="button" class="waza-prev">前の画像</button><button type="button" class="waza-next">次の画像</button></div><div class="waza-thumbs"><button type="button" aria-label="画像1を表示"><img src="https://motoki-design.co.jp/wordpress/wp-content/uploads/s01.jpg" alt="" loading="lazy"></button><button type="button" aria-label="画像2を表示"><img src="https://motoki-design.co.jp/wordpress/wp-content/uploads/s02.jpg" alt="" loading="lazy"></button><button type="button" aria-label="画像3を表示"><img src="https://motoki-design.co.jp/wordpress/wp-content/uploads/s03.jpg" alt="" loading="lazy"></button></div><p class="waza-gallery-status" role="status" aria-live="polite"></p></div>

.waza-thumb-gallery{max-width:100%;min-width:0}.waza-thumb-gallery .swiper{width:100%;overflow:hidden}.waza-thumb-gallery .swiper-wrapper{display:flex}.waza-thumb-gallery .swiper-slide{flex-shrink:0;width:100%}.waza-thumb-gallery .swiper-slide img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover}.waza-thumb-gallery .waza-thumbs{display:flex;gap:8px;margin-top:12px}.waza-thumb-gallery .waza-thumbs button{width:28%;padding:4px;border:2px solid transparent;background:#eee}.waza-thumb-gallery .waza-thumbs img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block}.waza-thumb-gallery button[aria-current="true"]{border-color:#315d50}.waza-thumb-gallery button:focus-visible{outline:3px solid #315d50;outline-offset:3px}.waza-gallery-controls{display:flex;gap:12px;margin-top:10px}.waza-gallery-controls button{padding:.6em 1em}

<script type="module">
import Swiper from 'https://cdn.jsdelivr.net/npm/swiper@14.3.0/swiper-bundle.min.mjs';
document.querySelectorAll('.waza-thumb-gallery').forEach((root) => {
  const el = root.querySelector('.swiper');
  if (el.swiper) return;
  const thumbs = [...root.querySelectorAll('.waza-thumbs button')];
  const prev = root.querySelector('.waza-prev');
  const next = root.querySelector('.waza-next');
  function update(swiper) {
    thumbs.forEach((button, index) => button.setAttribute('aria-current', String(index === swiper.activeIndex)));
    prev.disabled = swiper.isBeginning;
    next.disabled = swiper.isEnd;
    root.querySelector('.waza-gallery-status').textContent = `${swiper.activeIndex + 1} / ${thumbs.length}`;
  }
  const swiper = new Swiper(el, {
    loop: false,
    speed: matchMedia('(prefers-reduced-motion: reduce)').matches ? 0 : 300,
    on: { init: update, slideChange: update }
  });
  prev.addEventListener('click', () => swiper.slidePrev());
  next.addEventListener('click', () => swiper.slideNext());
  thumbs.forEach((button, index) => button.addEventListener('click', () => swiper.slideTo(index)));
});
</script>