jQueryプラグイン「bxslider」がjQuery3系で動かない時の対処法

jQueryのbxsliderというスライドショープラグイン、とっても使い勝手がいいですよね。
僕もよくお世話になっています。

で、このbxsliderプラグインなんですが、jQuery3.1.1のバージョンで動かそうとしたところ、なんと動かない・・・
ということで、取り急ぎ対処した内容を書いてみたいと思います。

jQuery3.1.1（jQuery3系）でbxsliderが動かない！具体的な症状は？？

bxsliderが動かないということですが、具体的にどういう風に動かないのか、症状から説明してみたいと思います。

いつまでたっても、スライドショーが始まらない状態になります・・・
Google Chromeのデベロッパーツールで見ても「indexOf of undefined」なるメッセージが・・・

なぜjQuery3.1.1（jQuery3系）でbxsliderが動かなくなってしまうのか原因を調べてみました。

いろいろな情報源がありますが、jQuery3系でload()イベントが廃止されたことが影響している模様。
jquery.bxslider.js（jquery.bxslider.min.js）のソースコードを追ってみると、ありました。load()を使っている場所が・・・

ということで、jQuery3.1.1固有の問題というより、jQuery3系で発生する問題ということですね！

では、jQuery3系でbxsliderが動くようにするための対処法をご説明します！

jquery.bxslider.js（jquery.bxslider.min.js）のコードの中身をgithubページで確認すると、285行目に以下のような記述があります。


if (this.complete) { $(this).load(); }

これを以下のように変更します！


if (this.complete) { $(this).trigger("load"); }

「load()」という記述があるので、この部分を修正し「trigger(“load”)」と変更すればOKです！
前述したように、jQuery3系でload()が廃止されているので、その代用としてtrigger(“load”)と書いているということですね！

ということで、今回はjQueryプラグイン「bxslider」がjQuery3系で動かない時の対処法をご紹介いたしました！
僕も久しぶりに使ってみたら気づいた次第だったので、もしかしたら現在進行形で悩んでいらっしゃる方に、お役立ちできれば幸いです！

それにしても、JavaScriptもそうですが、プログラムは色々バージョンが絡んでくると、ちょっとやっかいですね・・・