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


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は幽霊化しやすい。
変数に代入しないだけで、止められない子の出来上がり。