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

スポンサーリンク

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

jQueryスライドショー「bxSlider」がIEで動かない場合の対処法をご紹介します。

IEではjavascriptのコード解釈が他のブラウザと少し違うようで、そこを修正しないとbxSliderが動作しない場合があります。

IEでbxSliderが動かない!?

jQueryスライドショー「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が動かない時の対処法ですが、うさうさんの記事を参考に、まずはこちらの方法を試してみましょう。

<script type="text/javascript">
  $(document).ready(function(){
    
$('.bxslider').bxSlider({
  auto: true,
  mode: 'vertical',
});
  });
</script>

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は動かないようです。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">

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

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

これで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」という同じ機能がありますよ。

スポンサーリンク
PC用
PC用

フォローする

コメント

  1. Jun より:

    ご案内のjQueryスライドショー「bxSlider」は無料にて使用してよろしいのでしょうか。利用規約などございましたらお知らせください。
    大変明確なご説明で不慣れな私でも簡単に設置できそうです。ありがとうございます。

    • wind-mill_iwashiblog より:

      コメントありがとうございます。bxsliderは無料で使用できます。
      詳しくはこちらのサイトをご覧ください。ただ、内容は英語ですが・・・(^^;
      http://bxslider.com/

  2. […] クを貼って頂いてるブログにリンク張り返しちゃう(笑) jQueryスライドショー「bxSlider」がIEで動かない場合の対処法 | いわしブログ IE11 bxsliderが動かない : 小之介コーディングメモ 実は貼 […]

  3. […] jQueryのバージョンは1.8.2以上になっているかを確認します。 http://wind-mill.co.jp/iwashiblog/2014/05/bxslider-ie-notwork/ […]

  4. […] jQueryスライドショー「bxSlider」がIEで動かない場合の対処法 | いわしブログ […]