RSSを購読する
follow us in feedly
ふかふか交易所 | ネットの情報をわかりやすくお届け!
RSSを購読する
follow us in feedly

ニュータウンシリーズ まとめ

マインクラフト関連記事 まとめ

VR関連記事 まとめ

トップ ゲーム 動画 ホームページ 掲示板 お問い合わせ サイトマップ ページ下部へ

ホームページカテゴリ 新着記事

サイト内検索

過去7日間の人気記事

  • 総合
  • ゲーム
  • 動画
  • ホームページ

ホーム > ホームページカテゴリー No.41 ~ No.50 > 記事No.47

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

← 前の記事

次の記事 →

bxslider_error

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

参考:超簡単!ホームページにスライドショー機能を実装する方法(JQuery)

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

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

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

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

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


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

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

$(document).ready(function(){

の部分を

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

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


対処法② CSSとjsファイルが正常に読み込まれているか確認する

同じく<head></head>内に張り付けたコードのうち、CSSとjsファイル読み込み行である以下の部分に注目してみてください。


CSSとjsファイルが正常に読み込めていないと、スライドショーは正常に動作しません。CSS・jsファイルを配置した場所と、上記の読み込み行のパスが合っているかを今一度確認してください。


対処法③ jQueryのバージョンを変更する

私の記事では、バージョン1.10.2のjQueryを読み込んでスライドショーを動作させています。しかし表示するプラウザや端末の種類によっては、スライドショーが正常に動作しない場合があります。(特にIEでの不具合が多いです)

jQueryの読み込み行は<head></head>内に張り付けたコードの一番上の行です。


上記のコードの1.10.2の部分が、読み込むjQueryのバージョンを指定する部分です。動作に問題のある方は、 この部分を1.8.2などに変更してみてください(1.8.2は動作が比較的安定しているとのこと)

それでも動作に問題のある方は、以下のjQueryの一覧を参考に、バージョンを変更してみてください。

jquery過去のバージョンまとめ


対処法④ オプションの最後の行の「,」を削除する

bxSliderは以下のようにオプション行を追加することで、機能を追加・変更することができます。


しかしオプション行の一番最後の行(上記の例だと「mode: 'vertical',」の部分)の後ろに「,」が付いたままだと正常に動作しないことがあります。

なのでオプションの最後の行の後ろに「,」が付いている場合は削除してみてください。


スライドショーに不自然な余白ができてしまう場合


対処法 CSSファイルの書き換え

スライドショーを最初に設置した際に、上下左右に白い余白ができてしまう場合の対処法について解説します。

ダウンロードした「jquery.bxslider.css」を開いてください。

「jquery.bxslider.css」内の"THEME"の部分(32行目~46行目)がスライドショーのスタイルを決めている部分なので、この部分を無効化もしくは削除してください。


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

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

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

関連記事はこちら

この記事に対するコメント

Comment Form is loading comments...

過去7日間の人気記事

マインクラフト関連記事 まとめ

VR関連記事 まとめ

Aviutl(動画編集)関連記事まとめ

AR関連記事 まとめ

ご意見・ご質問等は 掲示板へ!

コメントを公開されたくない場合は メッセージフォームへ!


当サイトについて  月極広告の募集

©Copyright fukafuka295.jp 2016 All rights reserved.

トップ ゲーム 動画 ホームページ 掲示板 お問い合わせ サイトマップ ページ上部へ