いわしブログ

京都のウィンドミル代表いわしのブログです。wordpressやfacebookの設定、ブログ運営について備忘録代わりに更新してます。最近は動画も作ってます。

*

jQueryスライドショー「bxSlider」がIEで動かない場合の対処法

      2014/12/30

IE F12開発者ツール デバッグ

jQueryスライドショー「bxSlider」は、軽量で設置も簡単、手軽にスライドショーが設置できます。いわしブログでも以前に紹介記事を書きました。

http://wind-mill.co.jp/iwashiblog/2014/02/jquery-slideshow-bxslider/

jQueryスライドショー「bxSlider」

IEでbxSliderが動かない!?

現在製作中のwebサイトにスライドショーを設置したいという要望があったので、さっそくbxSliderを入れてテストしてみたところ、ChromeやFirefoxでは問題なく動作するのですが、なぜかIE11ではbxSliderが正常に動いてくれません。あれれ、どうなってんの?

動作環境を変えてみようということで、他のPCでテストしてみたのですが、やっぱりダメでした。IE10、IE9共にbxSliderは動かず。ChromeやFirefoxなら動作するので、単純なコードミスではありません。どうやら、IE全体でbxSliderがうまく動かないという不具合があるみたいです。

うさうさんがブログに「bxsliderがIEで動かないときのチェックポイント」という記事をアップされています。

http://usausan.com/blog/2013-03-11-330/

bxsliderがIEで動かないときのチェックポイント。 | usausan.com

ちなみに、うさうさんはbxsliderのIDとClass名が間違っていたため動かなかったそうです。単純なミスですが、よくある話ですねぇ・・・(^_^;

IEでbxSliderが動かない時の対処法

IEでbxSliderが動かない時の対処法ですが、うさうさんの記事を参考に、まずはこちらの方法を試してみましょう。

javascriptのbxslider呼び出しコードを修正します。まず1点目ですが、IEではjavascriptのコード解釈が他のブラウザと少し違うようで、そこを修正してやらないといけないようです。

というわけで、2行目の $(document).ready(function(){ を jQuery(document).ready(function($){ に変えてみましたがダメ。

続いて2点目を修正します。5行目と6行目はbxSliderのoptionコードです。切替速度やモード選択、キャプションの有無などを設定しますが、ここに複数の記載がある場合、IEは最後の行にカンマをつけません。6行目の mode: ‘vertical’, を  mode: ‘vertical’ に変更しましたが、やっぱりダメです。

jQueryのバージョンチェック

んがぁ~どうなってんだぁ~と思ってさらに検索してみると、「jQueryが動かない時に確認する9項目」というサイトがあって、ここに「jQueryのバージョンチェック」という項目がありました。

http://www.finefinefine.jp/web/kiji2117/

jQueryが動かない時に確認する9項目

よく見ると、jQueryのバージョンがbxSlider公式ページのものとは違っています。そういえば、作成中のwebサイトはjQueryプルダウンメニューを使っていて、jQueryの呼び出しが被るので1つに絞ったことを忘れてました。プルダウンメニューで用いたjQueryは1.4.2ですが、このバージョンだとbxSliderは動かないようです。

呼び出すjQueryを 1.4.2 から 1.8.2 に変更します。

これでbxSliderがちゃんと動くようになりました。めでたしめでたし。

IEでbxSliderが動かない時は、まずは単純な記載ミスのチェック、それから $(document).ready(function(){ とオプションのカンマをチェックして、これでもダメならjQueryのバージョンを変えてみてください。

IE F12開発者ツールでエラーをチェック

IEでjQueryが動かない時は、開発者ツールでエラーをチェックするという方法もあります。IEで該当のサイトを表示させて、F12を押すと開発者ツールが起動するので、コンソールタブをクリックするとエラーの詳細を表示してくれます。

IE F12開発者ツール コンソール

デバッグタブをクリックすると、エラーの発生箇所が表示されます。

IE F12開発者ツール デバッグ

IEでjQueryが動かない時は、さきほど紹介した「jQueryが動かない時に確認する9項目」を見ながらIEの開発者ツールを使うというのも手ですね。Chromeには「デベロッパーツール」、FireFoxも「FireBug」という同じ機能がありますよ。

 - jQuery