夜の帳がおりています。良い時間をすごせますように。Swiper使用時に、ウインドウをリサイズした際に動きが止まってしまうのを解決する方法Swiper使用時に、ウインドウをリサイズした際に動きが止まってしまうのを解決する方法ウインドウをリサイズすると、Swiperが止まってしまうこと、ありませんか?今回は手短に。「Swiper」についての記事をいくつか書いてきました。今回は、久しぶりに、そのSwiperに関しての記事です。「連続して横方向にゆっくり動くスライダーをswiperでつくる方法」では、横方向に自動でスクロールするスライダー(カルーセル)の作成方法についてご紹介しています。上記の記事で、自動横スクロールするスライダーを作成すること自体は可能なのですが、この方法。場合によっては、ウインドウをリサイズしたタイミングで、動きが止まってしまう場合があります。これは、ウインドウのリサイズが発生したタイミングで、Swiperのautoplay機能がオフになってしまうから起きているのでは(再計算されることによって、自動スクロールが止まってしまうのでは)、と推測されるのですが、これを解決する方法を書きたいと思います。次のコードをご覧ください。}});解決方法はとっても簡単。中で、該当の関数を実行するだけ。上のコードの、20行目〜22行目に注目してください。Swiperには、「こういうことをしたい」という要望に応えてくれる機能がたくさん存在しているのですが、Swiper上で、「何かが発生した瞬間」を検知する機能も備わっています。中でresizeイベントが発生した時に実行する関数を定義することが可能です。して定義している「Swiperオブジェクト自体」を対象として、autoplay.start();を実行する、という記述になります。この記述を入れておくことにより、ウインドウをリサイズしたタイミングで、動きが止まってしまう事象を解決することが可能です。swiperjs.com↑Swiper公式サイトのこちらのページに、Swiperを実行している時に発生するイベント、取得できるイベントが一覧で掲載されています。一読すると理解が深まるかと思います。この記事のまとめ優れたJavaScriptスライダー系ライブラリである「Swiper」をWebサイトで実行している際、ウインドウをリサイズすることをきっかけに、場合によりSwiperの動きが止まってしまうケースがあります。今回はそれを解決する方法について、記事を書いてみました。知っておくと役に立つ内容かもしれません。この記事が、皆さんのより良いWeb制作体験につながれば嬉しく思います。※この記事は、内容の品質向上を目的に随時更新を行う場合があります。