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

jqueryのロゴ

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

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

jQuery3.1.1(jQuery3系)でbxsliderが動かない! 具体的な症状は??

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

jQueryのbxsliderが動かない時の画面

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

jQuery3.1.1(jQuery3系)でbxsliderが動かない原因

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

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

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

jQuery3.1.1でbxsliderが動かない時の対処法

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

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

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

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

まとめ

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

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

スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク