ウインドウをリサイズすると、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 させているという記述になります)
Swiper公式のAPIページ
Swipe API | swiperjs.com
↑Swiper公式サイトのこちらのページに、
Swiperを実行している時に発生するイベント、取得できるイベントが一覧で掲載されています。
上のセクションで書いたイベント、resize もこの一覧の中に解説がありますので、
一読すると理解が深まるかと思います。
この記事のまとめ
優れたJavaScriptスライダー系ライブラリである
「Swiper」をWebサイトで実行している際、
ウインドウをリサイズすることをきっかけに、場合によりSwiperの動きが止まってしまうケースがあります。
今回はそれを解決する方法について、記事を書いてみました。
今回ご紹介したresizeイベント以外にも、Swiperには
取得できるイベントが多々ありますので、ご自身のサイトでSwiperを使っている場合は、
知っておくと役に立つ内容かもしれません。
この記事が、皆さんのより良いWeb制作体験につながれば嬉しく思います。
※この記事は、内容の品質向上を目的に随時更新を行う場合があります。