Swiperでウィンドウ幅と、スライド個数によってスタイルを変える

下記のようなスライドショーを作成したかったのでメモ。使用プラグインはSwiper.jsです。

2021/8/17 : 一部記述に不備があったためcodepenとブログを修正しました。

・横幅が下記の時に１画面に表示するスライドを表示させる
　0px ~ 768px:スライド１つ
　769px ~ 1080px:スライド２つ
　1081px ~ :スライド４つ
・スライドはループ表示
・１画面のスライドの数が満たない時はスライドさせない。ナビゲーションを出さない。ループ表示を解除

See the Pen 210113_横幅とスライドの個数によってスライドのスタイルを変更する by nekuta (@nekuta) on CodePen.

スライドの作成

//swiper-slideの個数を取得
let swiperItems = demoSlide.getElementsByClassName("swiper-slide").length;
  //swiperの設定
let mySwiper;    
const createSwiper = function (loop) {
      let parm = {
        slidesPerView: 1,//１画面に表示するスライド数
          loop: true,//スライドをループ
          allowTouchMove: true,//フリック操作を有効に
          spaceBetween: 20,//スライド左右の余白
          pagination: {//ページネーションの設定
            el: '.swiper-pagination',
            type: 'fraction',
          },
          navigation: {//ナビゲーションの設定
            prevEl: '.swiper-button-prev',
            nextEl: '.swiper-button-next',
          },
          breakpoints: {//breakpoints
            768: {
              slidesPerView: 2,
              spaceBetween: 20,
            },
            1080: {
              slidesPerView: 4,
              spaceBetween: 20,
            },
          },
        };
      if (!loop) {//loopしない場合は下記を書き換え
        parm.loop = false;
        parm.allowTouchMove = false;
      }
      mySwiper = new Swiper('#demo-slide', parm);//スライドを作成
        slideNum(mySwiper, swiperItems);
    };

//下記のような感じで呼び出す
createSwiper(true)//loopするスライド
createSwiper(false);//loopしないスライド

//スライドの数に応じてページネーションとナビゲーションにクラスを振る
function slideNum(swiperName, num) {
      var _this = swiperName.$el[0];//{作成したswiper}.$elでhtml要素を見ることができる
      let thisSwiperPagenation = _this.getElementsByClassName('swiper-pagination')[0];
      let thisSwiperNav = _this.getElementsByClassName('swiper-nav')[0];
      if (num === 1) {
        thisSwiperPagenation.classList.add('num-1');
        thisSwiperNav.classList.add('num-1');
      } else if (num <= 2) {
        thisSwiperPagenation.classList.add('num-2');
        thisSwiperNav.classList.add('num-2');
      } else if (num <= 3) {
        thisSwiperPagenation.classList.add('num-3');
        thisSwiperNav.classList.add('num-3');
      } else if (num <= 4) {
        thisSwiperPagenation.classList.add('num-4');
        thisSwiperNav.classList.add('num-4');
      } else if (num <= 5) {
        thisSwiperPagenation.classList.add('num-5');
        thisSwiperNav.classList.add('num-5');
      }
  }

読み込まれたとき

    function slideWidthWatch(load) {
      if(!load){
          mySwiper.destroy(false, true);//作成したswiperを一度削除する
      }
      if (swiperItems === 1) {
        createSwiper(false);
      }else if(swiperItems === 2){
        if (768 < window.innerWidth) {
          createSwiper(false);
        } else {
          createSwiper(true);
        }
      }else if(swiperItems === 3 || swiperItems === 4){
        if (1080 < window.innerWidth) {
          createSwiper(false);
        } else {
          createSwiper(true);
        }     
      }else{
        createSwiper(true);
      }
    }
    
    if (swiperItems <= 4) {//スライドの個数が4個以下の時resizeイベントをつける
      window.addEventListener('resize', function () { 
        slideWidthWatch(false);
      });
    }
    slideWidthWatch(true);