🦔

よくあるSPだけswiperさせたい時のおまじない（resize/matchMedia）

2023/10/25に公開

JavaScript

swiper

matchmedia

tech

~~よくあるSPだけswiperさせて、PCはswiperさせたくないやつです~~
よくあるかどうかは知らんけど、たまにこういうSPだけswiperとかあると思います
resizeの方法はそこら辺に転がってるので検索すればすぐ出ます

定番のresizeをゴリゴリ使って動かす

これはよくあるやつですね。

const swiperDom = document.querySelector(".js-swiper");

const swiperOptions = {
  //add swiper options
}

const createSwiper = () => {
  if(!swiper) swiper = new Swiper(swiperDom, swiperOptions);
}

const breakpoint = 768;
let swiper, swiperBool;

window.addEventListener("load", () => {
  if(window.innerWidth < breakpoint) {
    createSwiper();
    swiperBool = true;
  } else {
    swiperBool = false;
  }
});

window.addEventListener("resize", () => {
  if(window.innerWidth < breakpoint && !swiperBool) {
    createSwiper();
    productsSwiperBool = true;
  } else if(breakpoint <= window.innerWidth && swiperBool) {
    swiper.destroy(false, true);
    swiperBool = false;
  }
}, false);

ちなみにswiper.destroy(false, true)って何なん？って方は大元のcore.mjsを参照ください

macthMediaの場合

resizeでゴリゴリ動かしたくないので、matchMediaで書き換えます。
matchMediaでメディアクエリの状態を検知して、ブレイクポイントを通過した時だけ関数を実行させます
MDN貼っておきます

const swiperDom = document.querySelector(".js-swiper");
let swiper;

const swiperOptions = {
  //add swiper options
}

const createSwiper = () => {
  if(!swiper) swiper = new Swiper(swiperDom, swiperOptions);
}

const destroySwiper = () => {
  if (swiper) {
    swiper.destroy(false, true);
    swiper = null;
  }
}

const handleMediaQuery = event => {
  if (event.matches) {
    createSwiper();
  } else {
    destroySwiper();
  }
}

const mediaQuery = window.matchMedia('(max-width: 767px)');

window.addEventListener("load", () => handleMediaQuery(mediaQuery));
mediaQuery.addEventListener("change", handleMediaQuery);

matchMediaについてはこちらの方の記事もオススメです

自作関数matchMediaを使用する場合（10/28追記）

せっかくなので以前作成した関数を使います

importすればhandleMediaQueryに当たる部分やaddEventListener部分が省略できますね

import { matchMedia } from "./scripts/matchMedia.js";

const swiperDom = document.querySelector(".js-swiper");
let swiper;

const swiperOptions = {
  //add swiper options
}

const createSwiper = () => {
  if(!swiper) swiper = new Swiper(swiperDom, swiperOptions);
}

const destroySwiper = () => {
  if (swiper) {
    swiper.destroy(false, true);
    swiper = null;
  }
}

matchMedia(
  createSwiper,
  destroySwiper
)

同じようなSPだけ動かしたいswiperが増えたとしても、そのswiperに対応したswiperDomとかcreateSwiperやdestroySwiperを作ってあげれば管理も楽になりそうです

matchMedia(
  () => {
    createSwiper();
    createSwiper02();
    createSwiper03();
    //...
  },
  () => {
    destroySwiper();
    destroySwiper02();
    destroySwiper03();
    //...
  }
)

定番のresizeをゴリゴリ使って動かす

macthMediaの場合

自作関数matchMediaを使用する場合（10/28追記）

Discussion