SWELLの記事内で画像スライドを見やすく表示する方法｜iframe・リッチカラム・プラグイン・自作カルーセルを比較

/* ==============================
   ギャラリーブロック画像スライダー
   対象：mode-slider-gallery を付けたギャラリーブロック
   ============================== */

/* スライダー全体の外枠 */
.mode-slider {
  position: relative;
  width: 100%;
  max-width: 980px;
  margin: 2rem auto;
}

/* 横スクロールする表示エリア */
.mode-slider__viewport {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

/* Chrome / Safari のスクロールバーを非表示 */
.mode-slider__viewport::-webkit-scrollbar {
  display: none;
}

/* ギャラリー画像を横並びにする */
.mode-slider__track {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 16px;
  align-items: stretch;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none;
}

/* 1枚分のスライド枠 */
.mode-slider__track > .wp-block-image,
.mode-slider__track > .blocks-gallery-item {
  flex: 0 0 88% !important;
  width: 88% !important;
  max-width: 88% !important;
  margin: 0 !important;
  aspect-ratio: 16 / 9;
  scroll-snap-align: center;
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10);
}

/* 画像をスライド枠にきれいに収める */
.mode-slider__track > .wp-block-image img,
.mode-slider__track > .blocks-gallery-item img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain;
  border-radius: 0;
}

/* 画像リンクがある場合も枠いっぱいにする */
.mode-slider__track > .wp-block-image a,
.mode-slider__track > .blocks-gallery-item a {
  display: block;
  width: 100%;
  height: 100%;
}

/* キャプションがある場合は非表示にする */
.mode-slider__track figcaption,
.mode-slider__track .blocks-gallery-item__caption {
  display: none;
}

/* 左右の矢印ボタン共通 */
.mode-slider__arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  border: none;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.16);
  color: #333;
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
}

/* 左矢印 */
.mode-slider__arrow--prev {
  left: 8px;
}

/* 右矢印 */
.mode-slider__arrow--next {
  right: 8px;
}

/* 下部のドット全体 */
.mode-slider__dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 14px;
}

/* 通常状態のドット */
.mode-slider__dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: #d6d6d6;
  cursor: pointer;
}

/* 現在表示中のドット */
.mode-slider__dot.is-active {
  width: 22px;
  background: #ff7a59;
}

/* PC表示 */
@media (min-width: 768px) {
  .mode-slider__track > .wp-block-image,
  .mode-slider__track > .blocks-gallery-item {
    flex-basis: 76% !important;
    width: 76% !important;
    max-width: 76% !important;
  }

  .mode-slider__arrow {
    width: 48px;
    height: 48px;
  }

  .mode-slider__arrow--prev {
    left: -20px;
  }

  .mode-slider__arrow--next {
    right: -20px;
  }
}

/* スマホ表示 */
@media (max-width: 767px) {
  .mode-slider {
    padding-bottom: 56px;
  }

  .mode-slider__arrow {
    top: auto;
    bottom: 0;
    transform: none;
    width: 42px;
    height: 42px;
    font-size: 1.8rem;
    background: #fff;
  }

  .mode-slider__arrow--prev {
    left: calc(50% - 56px);
  }

  .mode-slider__arrow--next {
    right: calc(50% - 56px);
  }

  .mode-slider__dots {
    margin-top: 12px;
  }
}

document.addEventListener('DOMContentLoaded', function () {
  const galleries = document.querySelectorAll('.wp-block-gallery.mode-slider-gallery');

  galleries.forEach(function (gallery) {
    // 二重初期化を防ぐ
    if (gallery.dataset.sliderReady === 'true') return;
    gallery.dataset.sliderReady = 'true';

    // 古いギャラリーブロック形式にも一応対応
    const track = gallery.querySelector('.blocks-gallery-grid') || gallery;

    // スライド要素を取得
    const slides = Array.from(
      track.querySelectorAll(':scope > .wp-block-image, :scope > .blocks-gallery-item')
    );

    // 画像が2枚未満ならスライダー化しない
    if (slides.length < 2) return;

    // 外枠を作成
    const slider = document.createElement('div');
    slider.className = 'mode-slider';

    // 表示エリアを作成
    const viewport = document.createElement('div');
    viewport.className = 'mode-slider__viewport';

    // 矢印ボタンを作成
    const prevButton = document.createElement('button');
    prevButton.className = 'mode-slider__arrow mode-slider__arrow--prev';
    prevButton.type = 'button';
    prevButton.setAttribute('aria-label', '前の画像');
    prevButton.textContent = '‹';

    const nextButton = document.createElement('button');
    nextButton.className = 'mode-slider__arrow mode-slider__arrow--next';
    nextButton.type = 'button';
    nextButton.setAttribute('aria-label', '次の画像');
    nextButton.textContent = '›';

    // ドット用のエリアを作成
    const dots = document.createElement('div');
    dots.className = 'mode-slider__dots';
    dots.setAttribute('aria-label', 'スライド位置');

    // 元のギャラリーをスライダー構造の中に移動
    gallery.parentNode.insertBefore(slider, gallery);
    slider.appendChild(prevButton);
    slider.appendChild(viewport);
    viewport.appendChild(gallery);
    slider.appendChild(nextButton);
    slider.appendChild(dots);

    // 横並び用クラスを付ける
    track.classList.add('mode-slider__track');

    let current = 0;

    // ドットを作成
    slides.forEach(function (_, index) {
      const dot = document.createElement('button');
      dot.className = 'mode-slider__dot';
      dot.type = 'button';
      dot.setAttribute('aria-label', (index + 1) + '枚目へ');

      dot.addEventListener('click', function () {
        goToSlide(index);
      });

      dots.appendChild(dot);
    });

    const dotButtons = Array.from(dots.querySelectorAll('.mode-slider__dot'));

    // 指定した番号のスライドへ移動
    function goToSlide(index) {
      current = Math.max(0, Math.min(index, slides.length - 1));

      slides[current].scrollIntoView({
        behavior: 'smooth',
        block: 'nearest',
        inline: 'center'
      });

      updateDots();
    }

    // 表示中のドットを更新
    function updateDots() {
      dotButtons.forEach(function (dot, index) {
        dot.classList.toggle('is-active', index === current);
      });
    }

    // スワイプや横スクロール後に、現在のスライドを判定
    function detectCurrentSlide() {
      const viewportCenter =
        viewport.getBoundingClientRect().left + viewport.clientWidth / 2;

      let closestIndex = 0;
      let closestDistance = Infinity;

      slides.forEach(function (slide, index) {
        const rect = slide.getBoundingClientRect();
        const slideCenter = rect.left + rect.width / 2;
        const distance = Math.abs(viewportCenter - slideCenter);

        if (distance < closestDistance) {
          closestDistance = distance;
          closestIndex = index;
        }
      });

      current = closestIndex;
      updateDots();
    }

    // 左矢印
    prevButton.addEventListener('click', function () {
      goToSlide(current - 1);
    });

    // 右矢印
    nextButton.addEventListener('click', function () {
      goToSlide(current + 1);
    });

    // スクロール後に現在位置を更新
    viewport.addEventListener('scroll', function () {
      window.clearTimeout(viewport._scrollTimer);
      viewport._scrollTimer = window.setTimeout(detectCurrentSlide, 80);
    });

    // 初期状態のドットを反映
    updateDots();
  });
});