Swiperを使いたい

Tutorials
2023年09月29日

KANTAN! CMS STARTERはSwiperがデフォルトで入っているので、HTMLを書いてJSで簡単なセットアップをするだけでスライドショーができます。

HTMLを挿入

まずはスライドショーを入れたいところに以下のHTMLを貼り付けます。

コンテンツ部分のswiper-slideの数だけスライドします。
また、画像以外にテキストなどもスライド可能です。

前へ / 次へのボタンや、ドットナビゲーション、スクロールバーなどは不要であれば削除してください。

1行目のmySwiperTestの部分がSwiperを動かすためのclassになります。
同じページにスライドショーを複数挿入する場合はmySwiperTestの部分が被らないようにしてください。
Swiperで使うclass名に数値は使えないのでアルファベットのみのclass名にします。
例：mySwiperTest、mySwiperFirstなど

JSファイルでSwiperを初期化

ページ固有のJSファイル（aboutページならabout-index.jsなど）に以下のコードを追記します。

HTMLで指定したmySwiperTestclassが指定されていますが、実際にHTMLに指定したclassを入れてください。
effectなどの設定はSwiper 公式ドキュメントや他の方の記事が詳しいので、細かい設定をしたい方は検索してみてください。

JSファイルの作成方法は新しいページの作り方のページで紹介しているので、そちらも見てみてください。

新しいページの作り方

$(function () {
  // ----------------------------------------------
  // XXXページ
  // ----------------------------------------------

  var swiper = new Swiper(".mySwiperTest", {
    effect: "fade",
    loop: true,
    autoplay: {
      delay: 1000,
    },
    speed: 1000,
    pagination: {
      el: ".swiper-pagination",
    },
    navigation: {
      nextEl: ".swiper-button-next",
      prevEl: ".swiper-button-prev",
    },
    scrollbar: {
      el: ".swiper-scrollbar",
    },
  });
});

また、複数のスライドショーがある場合にはその数だけvar swiperの部分を丸ごと複製します。

$(function () {
  // ----------------------------------------------
  // XXXページ
  // ----------------------------------------------

  // ひとつめ
  var swiper = new Swiper(".mySwiperTest", {
    effect: "fade",
    loop: true,
    autoplay: {
      delay: 1000,
    },
    speed: 1000,
    pagination: {
      el: ".swiper-pagination",
    },
    navigation: {
      nextEl: ".swiper-button-next",
      prevEl: ".swiper-button-prev",
    },
    scrollbar: {
      el: ".swiper-scrollbar",
    },
  });

  // ふたつめ
  var swiper = new Swiper(".mySwiperFirst", {
    effect: "fade",
    loop: true,
    autoplay: {
      delay: 1000,
    },
    speed: 1000,
    pagination: {
      el: ".swiper-pagination",
    },
    navigation: {
      nextEl: ".swiper-button-next",
      prevEl: ".swiper-button-prev",
    },
    scrollbar: {
      el: ".swiper-scrollbar",
    },
  });
});

これでSwiperが動いているはずです。

Back Column