🐧

Swiper7系の実装テンプレートのまとめ

2023.08.31

SHARE

TABLE OF CONTENTS

    🐧

    Swiper7系の実装テンプレートのまとめ

    2023.08.31

    準備

    バージョンは「v.7.0.8」を使用しています。

    インストール

    // 最新バージョン
npm i swiper

// v.7.0.8
npm i swiper@7.0.8

    ライブラリのCSS

    下記URLをCDNかimportして使用する。

    その他のバージョン確認方法

    常に自動スライド

    CodePen

    Code

    /*
// --------------------------
// html
// --------------------------
<div class="c-swiperAuto swiper-container js-swiperAuto">
  <div class="swiper-wrapper">
    <div class="swiper-slide"></div>
  </div>
</div>

// --------------------------
// css
// --------------------------
.js-swiperAuto {
  width: liquid(400 + 24);
  height: liquid(300);
  .swiper-wrapper {
    height: 100%;
  }
  .img {
    height: 100%;
    width: max-content;
    height: liquid(300);
    width: liquid(400 + 24);
    img {
      width: liquid(400);
      height: 100%;
      object-fit: cover;
    }
  }
}
*/

import Swiper from "swiper/bundle";
export class SwiperAuto {
  constructor(duration = 30000) {
    this.config = {
      speed: duration,
      loop: true,
      slidesPerView: "auto",
      spaceBetween: 0,
      loopAdditionalSlides: 1,
      allowTouchMove: false, // スワイプ操作をできないようにする
      autoplay: {
        delay: 0, // 0にすることで流れ続けるようになる
        disableOnInteraction: false,
      },
    };
  }

  reset() {
    if (this.swiperList.length) {
      this.classList.forEach((data, i) => {
        data.destroy();
        if (i === this.swiperList.length - 1) this.swiperList = [];
      });
    }
  }

  init() {
    this.classList = [];
    this.swiperList = [...document.querySelectorAll(".js-swiperAuto")];
    if (this.swiperList.length > 0) {
      this.swiperList.forEach((ele) => {
        const wrap = ele.querySelector(".swiper-wrapper");
        wrap.setAttribute("style", "transition-timing-function: linear !important;");
        const data = new Swiper(ele, this.config);
        this.classList.push(data);
      });
    }
  }
}

    1枚ごとスライドするループ型

    ループをしたくない場合は「data-loop=""」に設定する。

    自動再生をしたい場合は「data-loop="true"」に設定する。

    CodePen

    Code

    /*
// --------------------------
// html
// --------------------------
<div
  class="c-swiperSingle swiper-container js-swiperSingle"
  data-loop="false"
  data-fit="true"
  data-pagination-type="bullets"
>
  <div class="swiper-wrapper">
    <div class="swiper-slide"></div>
  </div>
  <div class="c-swiperSingle__pg">
    <div class="swiper-button-prev">◀︎</div>
    <div class="swiper-button-next">▶︎</div>
  </div>
  <div class="c-swiperSingle__scrollbar">
    <div class="swiper-scrollbar"></div>
  </div>
  <div class="c-swiperSingle__pagination">
    <div class="swiper-pagination"></div>
  </div>
</div>

// --------------------------
// css
// --------------------------
.c-swiperSingle {
  position: relative;
  z-index: 0;
}
.c-swiperSingle__pg {
  display: flex;
  align-items: center;
  gap: liquid(24);
}
.c-swiperSingle__scrollbar {
}
.c-swiperSingle__pagination {
}
.js-swiperSingle {
  width: liquid(400 + 24);
  // height: liquid(300);

  .swiper-wrapper {
    height: 100%;
  }
  .swiper-slide {
  }

  .img {
    height: 100%;
    width: max-content;
    height: liquid(300);
    width: liquid(400 + 24);
    img {
      width: liquid(400);
      height: 100%;
      object-fit: cover;
    }
  }

  // --------------------------

  // コンテンツ幅ぴったり

  // --------------------------
  &[data-fit="true"] {
    width: 100%;
    .swiper-slide {
      width: liquid(400 + 24) !important;
      &:nth-last-of-type(1) {
        width: liquid(400) !important;
      }
    }
  }
}
*/

import Swiper from "swiper/bundle";
export class SwiperSingle {
  constructor() {}

  reset() {
    if (this.swiperList.length) {
      this.classList.forEach((data, i) => {
        data.destroy();
        if (i === this.swiperList.length - 1) {
          this.swiperList = [];
        }
      });
    }
  }

  init() {
    this.classList = [];
    this.swiperList = [...document.querySelectorAll(".js-swiperSingle")];

    if (this.swiperList.length > 0) {
      this.swiperList.forEach((ele) => {
        const config = {
          loop: ele.getAttribute("data-loop") === "true",
          speed: 400,
          autoplay: false,
          slidesPerView: "auto",
          loopAdditionalSlides: 1,
          spaceBetween: 0,
          paginationClickable: true,
        };

        const nextBtn = ele.querySelector(".swiper-button-next"),
          prevBtn = ele.querySelector(".swiper-button-prev");
        if (nextBtn && prevBtn) {
          config.navigation = {
            nextEl: nextBtn,
            prevEl: prevBtn,
          };
        }

        const pg = ele.querySelector(".swiper-pagination");
        if (pg) {
          // type: bullets, fraction
          config.pagination = {
            el: pg,
            type: ele.getAttribute("data-pagination-type"),
          };
        }

        const scrollbar = ele.querySelector(".swiper-scrollbar");
        if (scrollbar) {
          config.scrollbar = {
            el: scrollbar,
            hide: false, // ユーザー操作後にスクロールバーを非表示にしない
            draggable: true, // ドラッグ操作を可能にする
            dragClass: "drag",
            snapOnRelease: true, // スクロールバーを離したときにスライダーの位置を固定しないようにする
          };
        }

        const obj = new Swiper(ele, config);
        obj.on("slideChange", (e) => {
          setTimeout(() => {
            const index = obj.activeIndex; // 複製したスライドを含むindex番号
            const realIndex = obj.realIndex; // 複製前のスライドのindex番号
          }, 100);
        });
        this.classList.push(obj);
      });
    }
  }
}

    1枚ごと且つコンテンツ幅以上はスライドしない

    CodePen

    Code

    /*
// --------------------------
// html
// --------------------------
<div
  class="c-swiperSingle swiper-container js-swiperSingle"
  data-loop="false"
  data-fit="true"
  data-pagination-type="bullets"
>
  <div class="swiper-wrapper">
    <div class="swiper-slide"></div>
  </div>
  <div class="c-swiperSingle__pg">
    <div class="swiper-button-prev">◀︎</div>
    <div class="swiper-button-next">▶︎</div>
  </div>
  <div class="c-swiperSingle__scrollbar">
    <div class="swiper-scrollbar"></div>
  </div>
  <div class="c-swiperSingle__pagination">
    <div class="swiper-pagination"></div>
  </div>
</div>

// --------------------------
// css
// --------------------------
.c-swiperSingle {
  position: relative;
  z-index: 0;
}
.c-swiperSingle__pg {
  display: flex;
  align-items: center;
  gap: liquid(24);
}
.c-swiperSingle__scrollbar {
}
.c-swiperSingle__pagination {
}
.js-swiperSingle {
  width: liquid(400 + 24);
  // height: liquid(300);

  .swiper-wrapper {
    height: 100%;
  }
  .swiper-slide {
  }

  .img {
    height: 100%;
    width: max-content;
    height: liquid(300);
    width: liquid(400 + 24);
    img {
      width: liquid(400);
      height: 100%;
      object-fit: cover;
    }
  }

  // --------------------------

  // コンテンツ幅ぴったり

  // --------------------------
  &[data-fit="true"] {
    width: 100%;
    .swiper-slide {
      width: liquid(400 + 24) !important;
      &:nth-last-of-type(1) {
        width: liquid(400) !important;
      }
    }
  }
}
*/

import Swiper from "swiper/bundle";
export class SwiperSingle {
  constructor() {}

  reset() {
    if (this.swiperList.length) {
      this.classList.forEach((data, i) => {
        data.destroy();
        if (i === this.swiperList.length - 1) {
          this.swiperList = [];
        }
      });
    }
  }

  init() {
    this.classList = [];
    this.swiperList = [...document.querySelectorAll(".js-swiperSingle")];

    if (this.swiperList.length > 0) {
      this.swiperList.forEach((ele) => {
        const config = {
          loop: ele.getAttribute("data-loop") === "true",
          speed: 400,
          autoplay: false,
          slidesPerView: "auto",
          loopAdditionalSlides: 1,
          spaceBetween: 0,
          paginationClickable: true,
        };

        const nextBtn = ele.querySelector(".swiper-button-next"),
          prevBtn = ele.querySelector(".swiper-button-prev");
        if (nextBtn && prevBtn) {
          config.navigation = {
            nextEl: nextBtn,
            prevEl: prevBtn,
          };
        }

        const pg = ele.querySelector(".swiper-pagination");
        if (pg) {
          // type: bullets, fraction
          config.pagination = {
            el: pg,
            type: ele.getAttribute("data-pagination-type"),
          };
        }

        const scrollbar = ele.querySelector(".swiper-scrollbar");
        if (scrollbar) {
          config.scrollbar = {
            el: scrollbar,
            hide: false, // ユーザー操作後にスクロールバーを非表示にしない
            draggable: true, // ドラッグ操作を可能にする
            dragClass: "drag",
            snapOnRelease: true, // スクロールバーを離したときにスライダーの位置を固定しないようにする
          };
        }

        const obj = new Swiper(ele, config);
        obj.on("slideChange", (e) => {
          setTimeout(() => {
            const index = obj.activeIndex; // 複製したスライドを含むindex番号
            const realIndex = obj.realIndex; // 複製前のスライドのindex番号
          }, 100);
        });
        this.classList.push(obj);
      });
    }
  }
}

    Search

    Category

    Next Article

    🐟

    AstroでbuildしたHTMLファイル内の絶対パスを相対パスに置換する

    2023.05.12

    Prev Article

    📮

    JavaScriptで郵便番号検索で住所検索を日本郵便のAPIで実装する

    2023.04.15

    Relation Article

    記事一覧ページへ

    ©2025 SHOYA KAJITA.