以前このサイトの記事にて、jQueryで動作するスライドショー「bxSlider」の簡単な設置方法について解説しました。
-
-
超簡単！ホームページにスライドショー機能を実装する方法(JQuery)
自分のホームページに画像がどんどん移り変わるスライドショー機能を追加して賑やかにしたい！ という方々のために今回、超簡単にスライドショーを設置する方法をご紹介します！ ちなみに導入に成功すると↓このよ ...
続きを見る
すると、一部の方々から、スライドショーが正常に動作しないとの報告を少なからず頂きます。
そこで今回は「bxSliser」のスライドショーに関して、
- 「設置はできたがスライドショーが動かない」
- 「スライドショーに不自然な余白ができてしまう」
といった場合の対処法についてまとめてみました！
スライドショーが正常に動作しない場合の対処法
対処法① jQuery実行コードの書き換え
正常に動作しない場合はまず始めに、スライドショーを設置する際に＜head＞＜/head＞内に貼り付けたコードのうち、
$(document).ready(function(){
の部分を
jQuery(document).ready(function($){
に置き換えてみてください。
対処法② CSSとjsファイルが正常に読み込まれているか確認する
同じく＜head＞＜/head＞内に張り付けたコードのうち、CSSとjsファイル読み込み行である以下の部分に注目してみてください。
<script src="js/jquery.bxslider.min.js"></script>
<link href="css/jquery.bxslider.css" rel="stylesheet" />
CSSとjsファイルが正常に読み込めていないと、スライドショーは正常に動作しません。CSS・jsファイルを配置した場所と、上記の読み込み行のパスが合っているかを今一度確認してください。
対処法③ jQueryのバージョンを変更する
私の記事では、バージョン1.10.2のjQueryを読み込んでスライドショーを動作させています。しかし表示するプラウザや端末の種類によっては、スライドショーが正常に動作しない場合があります。（特にIEでの不具合が多いです）
jQueryの読み込み行は＜head＞＜/head＞内に張り付けたコードの一番上の行です。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
上記のコードの1.10.2の部分が、読み込むjQueryのバージョンを指定する部分です。動作に問題のある方は、 この部分を1.8.2などに変更してみてください（1.8.2は動作が比較的安定しているとのこと）
それでも動作に問題のある方は、以下のjQueryの一覧を参考に、バージョンを変更してみてください。
jquery過去のバージョンまとめ
対処法④ オプションの最後の行の「,」を削除する
bxSliderは以下のようにオプション行を追加することで、機能を追加・変更することができます。
$('.bxslider').bxSlider({
auto: true,
mode: 'vertical',
});
しかしオプション行の一番最後の行（上記の例だと「mode: 'vertical',」の部分）の後ろに「,」が付いたままだと正常に動作しないことがあります。
なのでオプションの最後の行の後ろに「,」が付いている場合は削除してみてください。
スライドショーに不自然な余白ができてしまう場合
対処法 CSSファイルの書き換え
スライドショーを最初に設置した際に、上下左右に白い余白ができてしまう場合の対処法について解説します。
ダウンロードした「jquery.bxslider.css」を開いてください。
「jquery.bxslider.css」内の"THEME"の部分（32行目～46行目）がスライドショーのスタイルを決めている部分なので、この部分を無効化もしくは削除してください。
以上スライドショーが正常に動作しない場合の対処法についてまとめてみました。
ここまでの対処法を試しても解決しない場合は、下のコメント欄よりご相談ください。
また新たな対処法が判明した際は、その都度追記していきたいと思います！
