bxSliderがInternet Explorerで動かない場合の対処法

スポンサーリンク
スポンサーリンク

Internet Explorer デベロッパーツール

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

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

IEでbxSliderが動かない時は、まずは単純な記載ミスのチェックから始めて、それからjavascriptコードをチェック、それでもダメならjQueryのバージョンを変えてみてください。

スポンサーリンク

Internet ExplorerでbxSliderが動かない

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

jQueryスライドショー bxSliderの設置方法
軽量で設置も簡単、高機能なjQueryスライドショー「bxSlider」をご紹介します。wordpressにはプラグインだけで設置可能なスライドショーがたくさんありますが、今回はプラグイン不要のjQueryスライドショーを使いました。

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

動作環境を変えてみようということで、他のPCでテストしてみたのですが、やっぱりダメでした。IE10、IE9でもbxSliderは動作しませんでしたが、ChromeやFirefoxであれば問題なく動作するので、単純なコードの間違いではありません。

どうやら、Internet ExplorerにはbxSliderがうまく動かないという不具合があるようです。

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

IEでbxSliderが動かない時の対処法ですが、まずはjavascriptのbxslider呼び出しコードを修正してみてください。

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

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のバージョンチェック」という項目がありました。

jQueryが動かない時に確認する9項目
私自身の経験と覚書として、jQueryが動かない・想定していた動作と違うといった場合の原因と確認方法をまとめました。

よく見ると、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開発者ツールでエラーをチェック

IEでjQueryが動かない時は、開発者ツールでエラーをチェックするという方法もあります。

IEで該当のサイトを表示させて、F12を押すと開発者ツールが起動するので、コンソールタブをクリックするとエラーの詳細を表示してくれます。

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

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

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

IEでjQueryが動かない時は、さきほど紹介した「jQueryが動かない時に確認する9項目」を見ながらIEの開発者ツールを使うというのも手ですね。

Chromeやfirefoxにも同じような機能「デベロッパーツール」がありますよ。

タイトルとURLをコピーしました