通常は画像を単体でアップロードして見せる方法になりますが、カスタムブロックを使って画像をスライドショー形式で表示することが可能です。

カスタムブロックの作成

カスタムブロックは左メニューのカスタムブロック＞新規から作成できます。今回は以下で設定してください。

カスタムブロックの編集ページの右上の読み込むボタンから以下のファイルを読み込んでも同じものが作成できます。

• 名前：スライドショー
• 識別子：slideshow
• ブロック：何もしない
• ブロックの追加と削除：チェックを入れる
• 追加可能なブロック：画像だけにチェックを入れる

カスタムスクリプトには以下を挿入してください。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/5.4.1/css/swiper.min.css" integrity="sha256-urV1luZ8JPIzBb+88vMT8qwbF8jBbHIrwQ8wTghtCOw=" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/5.4.1/js/swiper.min.js" integrity="sha256-xKd8O6CvawXs3b8ZCrfuwN9A0ISCM8bUhJC86L6A8OY=" crossorigin="anonymous" defer></script>

<style type="text/css">
  .swiper-container {
    display: flex;
  }
  .swiper-wrapper, .swiper-slide {
    height: auto;
  }
  img {
    max-width: 100%;
    height: auto;
  }
</style>

<script>
  document.addEventListener("DOMContentLoaded", () => {
    if (document.body.dataset.hasCompiledHtml) {
      new Swiper(".swiper-container", {
        loop: true,
        pagination: {
          el: ".swiper-pagination",
        },
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
      });

      return;
    }

    const imgs = document.querySelectorAll("img");
    const slides = [];
    const sizes = [];
    for (let i = 0; i < imgs.length; i++) {
      const img = imgs[i];
      img.style = {};
      const elm = img.closest("figure") || img;
      elm.style = {};
      slides.push(`<div class="swiper-slide">${elm.outerHTML}</div>`);
      sizes.push(img.width);
    }

    MTBlockEditorSetCompiledHtml(`
<div class="swiper-container" style="max-width: ${Math.min.apply(null, sizes)}px">
 <div class="swiper-wrapper">
   ${slides.join("")}
 </div>
 <div class="swiper-pagination"></div>

 <div class="swiper-button-prev"></div>
 <div class="swiper-button-next"></div>
</div>
`);
  });
</script>

以上でカスタムブロックの作成は完了です。

テンプレートにスニペットを挿入する

実際に公開するテンプレートに以下のソースコードを記述してください。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/5.4.1/css/swiper.min.css" integrity="sha256-urV1luZ8JPIzBb+88vMT8qwbF8jBbHIrwQ8wTghtCOw=" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/5.4.1/js/swiper.min.js" integrity="sha256-xKd8O6CvawXs3b8ZCrfuwN9A0ISCM8bUhJC86L6A8OY=" crossorigin="anonymous" defer></script>
<script>
document.addEventListener("DOMContentLoaded", function () {
  new Swiper(".swiper-container", {
    loop: true,
    pagination: {
      el: ".swiper-pagination",
    },
    navigation: {
      nextEl: ".swiper-button-next",
      prevEl: ".swiper-button-prev",
    },
  });
});
</script>

記事・ウェブページ内で利用する方法

記事・ウェブページで利用するには、ブロックを追加から先程追加したスライドショーを選択し、画像を追加から写真を追加していきます。

実際の公開サイトでは以下のようにスライドショー形式で表示されます。

以上画像をスライドショー形式で表示するカスタムブロックの追加方法のご紹介でした。