LoginSignup
2
0

More than 5 years have passed since last update.

Swiper2.7.6 で stopAutoplay が効かないバグを解消

Last updated at Posted at 2016-12-22

Swiper はよくあるスライダープラグインのひとつで、よく利用しています。
ただし、現時点で最新の Swiper3.x 系は IE11 以降対応なので、
仕事ではひとつ前の世代で IE8 以降対応の Swiper2.x 系を使う事があります。

Swiper公式サイト
http://idangero.us/swiper/
Swiper2.x系(GitHub)
https://github.com/nolimits4web/Swiper

ところが、2.x 系の最終版 Swiper2.7.6 には自動スライド機能まわりにバグがあり、
自動スライド停止メソッドのstopAutoplay()が効かなくなる事があります。

解決方法

ダウンロードしてきた idangerous.swiper.js を修正します。
1332行目でsetTimeoutしてますが、その直前でclearTimeoutしてあげるだけ。

idangerous.swiper.js
function autoplay() {
    clearTimeout(autoplayTimeoutId); // Bugfix
        autoplayTimeoutId = setTimeout(function () {
            if (params.loop) {

発生条件

パラメータautoplay: trueを入れて Swiper を実装したあと、
自動、手動に関わらずスライド2周目以降(左にスライドしての2周目判定も含む)で
1周目では効いてたはずのstopAutoplay()が効かなくなる。

自動スライドをコントロールする必要があるシーン。
例えば、スライドにYouTube動画を含めて、そのスライドになったら自動スライド停止&動画再生し、
再生終了後、もしくは再生停止すると自動スライド再開して...とかやってると、キレイにハマります。

原因(推測)

自動スライドは連続的なsetTimeoutのコンボで実装しているようです。
ループ処理かstartAutoplay()あたりで、autoplayTimeoutIdのクリア処理不足があり、
一人歩きを始めた幽霊setTimeoutからのコンボが別軸で走ってしまい止められない的な...。

setIntervalsetTimeoutは幽霊化しやすい。
変数に代入しないだけで、止められない子の出来上がり。

2
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
0