カスタマイズ

Swiperを使いたい

2023.07.10

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

HTMLを挿入

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

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

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

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

<div class="swiper mySwiperTest c-carousel">
  <div class="swiper-wrapper">
    <!-- コンテンツ -->
    <div class="swiper-slide">
      <img src="https://placehold.jp/320x185.png" alt="" />
    </div>
    <div class="swiper-slide">
      <img src="https://placehold.jp/320x185.png" alt="" />
    </div>

    <!-- 前へ / 次へ -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
    <!-- ドットナビゲーション -->
    <div class="swiper-pagination"></div>
    <!-- スクロールバー -->
    <div class="swiper-scrollbar"></div>
  </div>
</div>

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が動いているはずです。

この記事がよかったらシェアお願いします！

HTMLを挿入

JSファイルでSwiperを初期化

share