• このエントリーをはてなブックマークに追加

bxSliderとは

bxsliderというjQueryを使ったプラグインがある。スライダーと呼ばれる、右から左へ、または左から右へするするーっとバナー画像などを動かすjQueryを使ったプラグイン。

バナー画像が1枚しか入らない領域に何枚も画像を仕込んでおくことができるため、制限された領域でより目を引く大きな画像を表現したいときにはこれは大変便利。

bxSliderの設置・使い方の簡単な手順

  1. https://jquery.com/からjQueryのコアファイルをダウンロードする
  2. http://bxslider.com/からプラグインをダウンロードする
  3. 外部読み込み記述
    1. jQueryのコアファイルを外部読込する
    2. bxSliderのCSSを外部読込する
    3. bxSliderのJavaScriptを外部読込する
  4. bxSliderを呼び出すスクリプトを記述する
    1. $(document).ready(function(){ $('.bxslider').bxSlider( // ここにオプションを入れる ); });
    2. オプション一覧:http://bxslider.com/options
    3. 例) $(document).ready(function(){ $('.bxslider').bxSlider( mode: 'slider', captions: true ); });
  5. 動作確認する

bxSliderでハマる困った問題・うまく動作しない・動かない・変

全く動かない

jQueryを読み込んでおらず、表示が全くスライダーにならないといったケースが有る。

綴り・スペル間違い

呼び出すbxSliderのクラス名が間違っている。

$(document).ready(function(){
$('.bxslider').bxSlider();
});

デフォルトだと、上記通りだが、.bxsliderを.bxSliderとしていたり、.bnr-sliderとかしていると動かない。かならずHTMLとbxSliderの呼び出し部分の名称は一致させること。

記述間違いがある

エラーになっていると動作しない。スペル間違い、記述間違い、カンマが多いとかカンマがない。あるいはセミコロンで終わっていない。カッコの数が間違っていないかどうかなどちゃんと確認する。

// エラーとなるケース... セミコロンがない。カッコの数がおかしい。
$(document).ready(function(){
$('.bxslider').bxSlider()
};

フォルダ名が間違えている

設置するフォルダの位置が間違えている、1階層分違う場所に設置しているとか、フォルダ名を独自のものに変更しているだとか。

ファイル名が間違えている

ファイル名が間違えていることがある。サンプルのコードをそのまま書いてしまっていて、自分が設置したファイルはリネームして読み込み部分を記述しているケースなど。

デフォルトなのに表示が変

bxslider用のデフォルトのCSSがうまく読み込まれていない。

コンフリクトしている、衝突している

スライダー、jQueryが動かない。

そういったときは、まずバージョンがbxSliderと相性のいいものかチェックする。すでにサイトにjQueryがあって、ほかのものと一緒にするとうまく動かないときには注意する。jQueryのバージョンを新しくしたり、あるいは古くして試してみて、他のプラグインなどが動けばそれで問題解決。

どうしても解決しない場合は、別のスライダーのプラグインを検討するのも良いかも。