Swiper使用時に、ウインドウをリサイズした際に動きが止まってしまうのを解決する方法

ウインドウをリサイズすると、Swiperが止まってしまうこと、ありませんか？

今回は手短に。
当サイトではこれまで、優れたJavaScriptスライダー系ライブラリ、
「Swiper」についての記事をいくつか書いてきました。

今回は、久しぶりに、そのSwiperに関しての記事です。

当サイト内で、多くの方に閲覧いただいている記事
「連続して横方向にゆっくり動くスライダーをswiperでつくる方法」では、横方向に自動でスクロールするスライダー(カルーセル)の作成方法についてご紹介しています。

上記の記事で、自動横スクロールするスライダーを作成すること自体は可能なのですが、
この方法。
場合によっては、ウインドウをリサイズしたタイミングで、動きが止まってしまう場合があります。

これは、ウインドウのリサイズが発生したタイミングで、
Swiperのautoplay機能がオフになってしまうから起きているのでは(再計算されることによって、自動スクロールが止まってしまうのでは)、
と推測されるのですが、これを解決する方法を書きたいと思います。次のコードをご覧ください。

const mySwiperWrapper = document.getElementById('swiperWrapper');
const mySwiper = new Swiper('.swiper-container-own-horizontal', {
allowTouchMove: false,
freeMode: true,
longSwipes: false,
loop: true,
loopedSlides: 6,
slidesPerView: 3,
speed: 4000,
autoplay: {
    delay: 0,
  },
pagination: {
    el: '.swiper-pagination',
  },
on: {
    slideChangeTransitionStart: function() {
      mySwiperWrapper.style.transitionTimingFunction = 'linear';
    },
    resize: function() {
      mySwiper.autoplay.start();
    }
  }
});

解決方法はとっても簡単。on: {} の中で、該当の関数を実行するだけ。

上のコードの、20行目〜22行目に注目してください。
Swiperには、「こういうことをしたい」という要望に応えてくれる機能がたくさん存在しているのですが、
Swiper上で、「何かが発生した瞬間」を検知する機能も備わっています。
つまり「JavaScriptで、イベントを取得できる」ということなのですが、今回使用するのは
文字通り resize イベントです。

上のコードの、20行目〜22行目にある通り、
on: {} の中で
resizeイベントが発生した時に実行する関数を定義することが可能です。
このサンプルコードの記述では、
mySwiper.autoplay.start();
として、2行目で const mySwiper として定義している
「Swiperオブジェクト自体」を対象として、
autoplay.start();
を実行する、という記述になります。

この記述を入れておくことにより、
ウインドウをリサイズしたタイミングで、動きが止まってしまう事象を解決することが可能です。
(ウインドウをリサイズした時に、明示的に autoplay 機能を start させているという記述になります)