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

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

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

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

スライドの作成

    const createSwiper = function (loop) {
      let parm = {
        slidesPerView: 1,//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');
      }
  }

読み込まれたとき

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

参考サイト

Swiper API : https://swiperjs.com/api/
swiper.js使ってみたからそのオプションについて(v4.1.6) | なんかいろいろデザインする人 : https://reiwinn-web.net/2018/03/15/swiper-4-1-6/

プラグイン

Swiper : https://swiperjs.com/