🐧 ~

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

2023.08.31

RELATED CATEGORY

JavaScript

TABLE OF CONTENTS

準備

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

インストール

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

// v.7.0.8
npm i swiper@7.0.8

ライブラリのCSS

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

https://unpkg.com/swiper@7.0.8/swiper-bundle.min.css

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

常に自動スライド

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);
      });
    }
  }
}

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

準備

インストール

ライブラリのCSS

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

常に自動スライド

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

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

NEXT ARTICLE

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

PREV ARTICLE

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

RELATION ARTICLE

Viteで静的サイトの開発環境を構築する。

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

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

JavaScriptでHoverと相互Hoverを実装する

RETURN TO INDEX

記事一覧ページに戻る

PICKUP ARTWORK

Audio Visualizer

Pokemon Cards Holographic Effect

GPGPU Grape Gum

My Summer Vacation

Eyeball

Infinity Gallery