機種別ハイスコア(80点~)タイトルを見る

スマホで高画質なPCゲームをプレイ可能!

事前登録で1~2ヶ月間無料 + 半年間の料金が半額に!

HP・ブログ関連

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

2019年4月11日

以前このサイトの記事にて、jQueryで動作するスライドショー「bxSlider」の簡単な設置方法について解説しました。

[blogcard url="https://fukafuka295.jp/homepage-slideshow-kantan/"]

すると、一部の方々から、スライドショーが正常に動作しないとの報告を少なからず頂きます。

そこで今回は「bxSliser」のスライドショーに関して、

  • 「設置はできたがスライドショーが動かない」
  • 「スライドショーに不自然な余白ができてしまう」

といった場合の対処法についてまとめてみました!

職業ユーチューバーにオススメ!

会社員・個人事業主・法人代表者のいずれでも発行可能

アメリカン・エキスプレス®
・ビジネス・カード

当サイトからの入会で
初年度の年会費0円(無料)

20歳から入手可能な一流ゴールドカード

会社員・個人事業主・法人代表者のいずれでも発行可能

アメリカン・エキスプレス®
・ビジネス・ゴールド・カード

当サイトからの入会で
初年度年会費0円(無料) 3万ポイント

スライドショーが正常に動作しない場合の対処法

対処法① jQuery実行コードの書き換え

正常に動作しない場合はまず始めに、スライドショーを設置する際に<head></head>内に貼り付けたコードのうち、

$(document).ready(function(){

の部分を

jQuery(document).ready(function($){

に置き換えてみてください。

2020年8月現在のトップセールス

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

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

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

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

ゲームも仕事も快適に!

2020年8月:最も人気なゲーミングPCはこちら

スマホで高画質なPCゲームをプレイ可能!
2020年7月末までの登録
最大61日間全ユーザー無料
2020年7月末までの登録で、最大61日間全ユーザー無料

関連コンテンツ

機種別ハイスコア(80点~)タイトルを見る

機種別ハイスコア(80点~)タイトルを見る

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

Copyright© ゲマステ!- Gamers Station , 2020 All Rights Reserved.