Stinger5でjQueryプラグイン「bxSlider」が動かなかったときの対処（IE8）

先日の記事で、無料wordpressテーマの「Stinger5」に、最強jQueryスライダープラグイン「bxSlider」を使ってカルーセルスライダーを実装する工程をかんたんに綴りました。

ただ、ブラウザチェック時にIE8でスライダーが表示されないというトラブルにぶち当たりました。その時の対処法と、IEでbxSlider見たときに起こる類似のトラブルについてまとめました。

IE8で「bxSlider」のheigthが0になって表示されないトラブル

細かいソースやjavascriptの記述は省略しますが、だいたいこんな感じのHTMLソースになっています。

            &lt;div style="max-width: 100%;" class="bx-wrapper"&gt;
              &lt;div style="width: 100%; overflow: hidden; position: relative; height: 200px;" class="bx-viewport"&gt;
                &lt;ul style="width: 515%; position: relative; transition-duration: 0.5s; transform: translate3d(-2048px, 0px, 0px);" id="headimg" class="bxslider"&gt;
                  &lt;li class="bx-clone" style="float: left; list-style: outside none none; position: relative; width: 1024px;"&gt;
                    &lt;img src="画像へのパスuploads/2015/02/cropped-banner21.gif" height="200" width="1024"&gt;
                  &lt;/li&gt;
                  &lt;li style="float: left; list-style: outside none none; position: relative; width: 1024px;"&gt;
                    &lt;img src="画像へのパスuploads/2015/02/main-banner.jpg" height="200" width="1024"&gt;
                  &lt;/li&gt;
                  &lt;li style="float: left; list-style: outside none none; position: relative; width: 1024px;"&gt;
                    &lt;img src="画像へのパスuploads/2015/02/banner1.gif" height="200" width="1024"&gt;
                  &lt;/li&gt;
                  &lt;li style="float: left; list-style: outside none none; position: relative; width: 1024px;"&gt;
                    &lt;img src="画像へのパスuploads/2015/02/cropped-banner21.gif" height="200" width="1024"&gt;
                  &lt;/li&gt;
                  &lt;li class="bx-clone" style="float: left; list-style: outside none none; position: relative; width: 1024px;"&gt;
                    &lt;img src="画像へのパスuploads/2015/02/sub-banner.jpg" height="200" width="1024"&gt;
                  &lt;/li&gt;
                &lt;/ul&gt;
            &lt;/div&gt;
            &lt;div class="bx-controls bx-has-pager"&gt;
              &lt;div class="bx-pager bx-default-pager"&gt;
                &lt;div class="bx-pager-item"&gt;
                  &lt;a href="" data-slide-index="0" class="bx-pager-link"&gt;1&lt;/a&gt;
                &lt;/div&gt;
                &lt;div class="bx-pager-item"&gt;
                  &lt;a href="" data-slide-index="1" class="bx-pager-link active"&gt;2&lt;/a&gt;
                &lt;/div&gt;
                &lt;div class="bx-pager-item"&gt;
                  &lt;a href="" data-slide-index="2" class="bx-pager-link"&gt;3&lt;/a&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;

</li>

</li>

</li>

</li>

</li>

</ul>

</div>

</div>

</div>

</div>

前回の記事を見ていただくと解りやすいかと思うのですが、id=”headimg”を指定してbxSliderを呼び出しています。なのでその子要素と親要素にスタイルが適用されて、その親要素「class=”bx-viewport”」と「class=”bx-wrapper”」のふたつはスクリプトによって自動生成されています。

ちょっと詳しいことは忘れましたが、IE8ではこの自動で適用されるスタイルのheightが0になってしまい、スライドする要素が軒並み表示されませんでした。

対応してないのかな？とおもいきや、配布ページではIE8でも正常に動作しています。というかbxSliderはIE7から対応しているのでした。

ページャーのようなものが丸から四角になってしまっていますが、これは問題ありませんね。

IE8でスライダーのheightが0になったときの解決策

javascriptの記述を確認しましょう。

$(function(){////////bxSlider

    $('#headimg').bxSlider({
          auto : true ,
          speed : 500 ,
          pause : 2000 ,
          controls : false
     });
});

$(function(){////////bxSlider

$('#headimg').bxSlider({

auto : true ,

speed : 500 ,

pause : 2000 ,

controls : false

});

最初、jQueryの記法でこのように書いていました。これを

jQuery(document).ready(function(){////////bxSlider

     jQuery('#headimg').bxSlider({
          auto : true ,
          speed : 500 ,
          pause : 2000 ,
          controls : false
     });
});

jQuery(document).ready(function(){////////bxSlider

jQuery('#headimg').bxSlider({

auto : true ,

speed : 500 ,

pause : 2000 ,

controls : false

});

$を「jQuery」に変えました。IEで開発者ツールを確認しつつ進めると、どうやら「widgets.js」に問題があるようでした。

これはTwitter APIが読んでいるファイルなのですが、リモートファイルだし圧縮されているし触る気にもならなかったので、思い切って非表示にします。

StingerはSNSボタンをテンプレートファイルとして単体で読み込んでいます。「sns.php」のようなファイルを探してください。これを読んでいるページで、以下の記述をコメントアウトしましょう。

//get_template_part('sns')

1	//get_template_part('sns')

これで正常に動きました！

と、ここで非常にいいタイミングで、最近の記事でIE8とwidget.jsについて書いてあるものを見つけました。
IE8でツイートボタン貼り付けるとエラーが出る件 – < /gecko >
どうやらIE8は真っ二つに切り捨てられたようです…

IEでbxSliderを見たときのトラブルいろいろ対処法

なんかその他にもいろいろあるみたいで、いくつか、かんたんに書いておきます。

IE9,10でbxSliderが動かなかったケース

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

IE9と10で動かなかったら悲惨ですね。

対処：jQueryの呼び出しの書き方を変える

//$(function(){ これはだめ
jQuery(document).ready(function(){

1 2	//$(function(){ これはだめ jQuery(document).ready(function(){

僕もここを参考にしました。

対処：jQueryのバージョンを変える

だいたいIE8あたりを意識してjQueryを書いたりするときは、バージョン1.8.3ぐらいにしましょう。

今は2.X系がリリースされていますが、違いは以下のようになります。

	Internet Explorer	Chrome	Firefox	Opera	Safari	iOS	Android
1.x	6以上	最新-1以上			5.1以上	6.1以上	2.3／4.0以上
2.x	9以上	最新-1以上			5.1以上	6.1以上	2.3／4.0以上

現在利用しているjQueryのバージョンを確認するには？ – Build Insider

2.Xは、IEの旧式を切り捨てることでより高速な動作をするように設計されているそうです。

1.Xシリーズのリリース予定もあるようですが、「jQuery 1.12」以降はIE8のサポートをしないそうです。

「2.3」「1.13」からはサポート対象外のブラウザに関するAPIなどの記述の一切を削除するそうなので気をつけましょう！

IE7でbxSliderのスライダー画像が右にずれるケース

bxSliderで画像の位置が右にズレる場合の対処法:メモ | webutubutu

IE7まではbxSliderの仕様で対応はしていますが、よくもそこを意識しようとしたなぁと寛大な姿勢に刺激を受けます。

対処：マークアップを見直す

olタグでスライダーをマークアップした際に、既存のCSSの影響を影響を受けてしまったようです。

あとはCSSのtext-align:centerが影響していた、と書いてあります。

IE7～9で画像が縦並びになるケース

jQueryスライドショー「bxslider」がIE9,IE8,IE7で動かなかった件 | ハイジで歯維持

対処法：optionの最後の値のあとの「,（カンマ）」を消去

     jQuery('#headimg').bxSlider({
          auto : true ,
          speed : 500 ,
          pause : 2000 ,
          controls : false , //この行のカンマ不要
     });

jQuery('#headimg').bxSlider({

auto : true ,

speed : 500 ,

pause : 2000 ,

controls : false , //この行のカンマ不要

});

option指定の最終行の末尾に注意です！

対処法：optionの「easing:’ease’,」を消去

これはjquery-easing.jsを読めばいいような気がしますが、いかがでしょうか？

以上です。

いくつか記事を拝見させていただきましたが、「jQueryのバージョンをアップデートしたら直った」というものがチラホラと見受けられました。

IEとjQueryの相性に関してはNAVERでも読んでおけばいいと思います。
IEでjQueryが動かない人への対処法まとめ – NAVER まとめ

でわ！

Profile

東京でWebデザイナー・コーダーとして、フロントエンド的なことからデザイン思考的なことを考えたりして、ごにょごにょと活動中。（ポートフォリオ）Webクリエイターでは珍しい(?) HIPHOP, R&B好き。休日はよくカフェや漫画喫茶に出向いたりパン屋に行ったりコーヒ豆買いに行ったり、主に散歩しています。。デザインのトレンドやデザイン思考、HTML、CSSからSASS、Javascript、Wordpress構築などコーディングのTIPSなどをブログにアップしていきます。その他のことはtwitter( @satohmsys )まで。コーヒー友達募集中。