詳しい人求む！

jQuery:bxsliderのIE9以前のバグ

締切済

質問者：y.shima41
質問日時：2015/11/20 20:10
回答数：2件

プログラム初心者です。
WEBサイトの構築にbxsliderを使用していますが、
ブラウザチェックにてIE９以前でのみ、「スライドが途中で止まる」というバグが起きています。

色々調べて試してみたのですが、
やはり自力で改善できず…アドバイスいただけないでしょうか。
Javascriptに関してまだ知識が浅い為、初歩的なミスでしたらすみません。

記述はこのようにしています。
--HTML----------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitio …
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8. …
<script src="js/jquery.bxslider.min.js"></script>
</head>

<body>
<div class="l_slide">
<div class="bx-wrapper">
<div class="bx-viewport">

<ul class="bxslider">
<li><a href="#" target="_top"><img src="index/img/main.jpg"></a></li>
<li><a href="#" target="_top"><img src="index/img/main.jpg"></a></li>
<li><a href="#" target="_top"><img src="index/img/main.jpg"></a></li>
<li><a href="#" target="_top"><img src="index/img/main.jpg"></a></li>
<li><a href="#" target="_top"><img src="index/img/main.jpg"></a></li>
<li><a href="#" target="_top"><img src="index/img/main.jpg"></a></li>
<li><a href="#" target="_top"><img src="index/img/main.jpg"></a></li>
</ul>

</div>
</div>
</div>

<script type="text/javascript">
$(document).ready(function(){
$('.bxslider').bxSlider({
auto: true,
pause: 4800,
speed: 1000,
autoHover:true
});
});
</script>

</body>
</html>
----------------------------

CSSはデフォルトの「jquery.bxslider.css」に下記内容をプラスしているだけです。
--CSS----------------------------
.l_slide{
width:1000px;
display:block;
margin:10px 0 60px;
}

ul.bxslider li a img{
width:1000px;

}

ul.bxslider li a:hover{
opacity:0.7;
filter:alpha(opacity=70);
-ms-filter:"alpha( opacity=70 )";
}
----------------------------

ちなみに開発者ツールで確認したら、デフォルトの「jquery.bxslider.min.js」に対して添付画像のようなエラーメッセージが出ていました。

これも何か影響しているのでしょうか。
どうぞよろしくお願い致します。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

最新から表示
回答順に表示

No.2

回答者： fufufunofufufu
回答日時：2015/11/27 17:44

No.1です。

バージョンではなかったってことですね。
あとはこんなのみつけたので良ければ見てください。
http://wind-mill.co.jp/iwashiblog/2014/05/bxslid …

また、

＞同ページ内に他にもjquery.dropdownやslidebars.minなどのjQueryも使用しているもの影響するのでしょうか。

他のjsが影響することは多々あります。
そういう私もつい最近、このbxslider使う予定だったサイトで、他との兼ね合いでIEどころかまったく使えず、別のスライダーをつかいました。

＞ちなみにIEブラウザチェックはF12開発者ツールのエミュレーションから見ていますが・・・

私も同じです。
そこに出てくるコメント見て、修正します。

ただ、自分で作ったjsとか超々軽量なプラグインとかならいいですが、プラグインはきちんと読み解いて修正しないと、今度は別のところがおかしくなって・・・と面倒なことになりかねないので、こういう場合は私なら他のプラグイン探します。。。

お役に立てず申し訳ないです。

- 0
- 件

通報する

この回答へのお礼

こちらこそ何度もありがとうございます。
教えていただいたサイトをぜひ参考させていただきます。

＞他のjsが影響することは多々あります。
やはり兼ね合いもあるのですね。同じbxsliderを使用しているサイトでも問題なく動いているサイトも多いので…。

IEに関しては本当に厄介でいつも悩まされます。
少しでもご意見いただけて助かりました。
ありがとうございました。

通報する

お礼日時：2015/11/28 00:21

No.1

回答者： fufufunofufufu
回答日時：2015/11/25 15:17

こんにちは。

仕事で作ったサイトでbxslider使ってますが、IE８でも問題無いです。

質問者様が書いてあるHTMLとオプションでこちらで実証しましたが、一応動きました。

それで思ったのですが、
bxsliderのバージョンとjQuery本体のバージョンは咬み合ってますか？
書いてあるところを見ると、jQuery本体は1.8.2を使っているようですが・・・
もしbxsliderのプラグインファイルを最近Githubからダウンロードしたのであれば、jQuery本体は1.11.3のほうが良いと思います。

http://bxslider.com/ではjQuery1.8.2とかいてありますが、こういうのはだいたい都度バージョンアップしていてGithubのほうで更新されて行く場合が多いので。

だいたい、プラグイン一式をDLした時に入っているREADMEファイルの中に適したjQueryのバージョンが記載されています。

ちなみに、私が仕事で使った時は、bxslider4.1.2でjQueryは1.10.1を使いました。
なので、一度バージョンの確認をしてみてください。

・・・
あと個人的に気になったのは、現在Githubから提供されているbxslider4.2.5あんまり良くないですね。
オートプレイとコントロール（prev/next）の相性が悪くスライドが飛びます。
私が以前使っていたバージョンは問題なかったので、古いバージョンも試してみてはいかがかなと思います。
Githubは普通に見ると最新バージョンしか表示されてないですが、「branch: master」のボタン→tagsから古いバージョンもDLできます。

頑張ってください。

- 0
- 件

通報する

この回答へのお礼

ご返答ありがとうございます。
今回のサイトで使用したファイル一式はhttp://bxslider.com/からダウンロードしました。

＞プラグイン一式をDLした時に入っているREADMEファイルの中に適したjQueryのバージョンが記載されています。
DLしたファイルを確認してみたところ、bxSlider 4.1.2でjQueryバージョンは1.8.2と記載されていました。

念の為、1.10.1や1.11.3でも試してみましたが、やはり途中で止まってしまいました。。。
同ページ内に他にもjquery.dropdownやslidebars.minなどのjQueryも使用しているもの影響するのでしょうか。
せっかくお答えいただきましたのに、申し訳ありません。

Githubについては今回教えていただき初めて知りましたので、ぜひ今後活用させていただきます！

ちなみにIEブラウザチェックはF12開発者ツールのエミュレーションから見ていますが、
他に確認しやすい方法はありますでしょうか。

通報する

お礼日時：2015/11/25 20:34

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！