ゲマステ!- 新作ゲームレビュー, マイクラ, ゲームMOD情報まとめ

ゲーマーズステーション | ゲームを中心に、動画・ブログ制作などのネットコンテンツ全般からレビュー情報まで分かりやすく紹介

※ 記事内にアフィリエイト広告が含まれています

HP・ブログ関連

[Bxslider]スライドショーが正常に動作しない、設置できない場合の対処法まとめ

2019年4月11日  

以前このサイトの記事にて、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行目)がスライドショーのスタイルを決めている部分なので、この部分を無効化もしくは削除してください。

以上スライドショーが正常に動作しない場合の対処法についてまとめてみました。

ここまでの対処法を試しても解決しない場合は、下のコメント欄よりご相談ください。

また新たな対処法が判明した際は、その都度追記していきたいと思います!

この記事をシェアする

関連コンテンツ

  • この記事を書いた人

ふかふか

SNSフォロワー13万人以上、ウェブコンテンツクリエイターとして活動しています!国内・海外の多数の企業と提携し、年間250以上のガジェットレビューを行っています。見やすく・分かりやすくがモットー!

-HP・ブログ関連
-, , , , , , , , , , , ,

Copyright© ゲマステ!- 新作ゲームレビュー, マイクラ, ゲームMOD情報まとめ , 2024 All Rights Reserved Powered by AFFINGER5.