jQuery bxSlider スライドショーの使い方とオプション設定方法

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

bxSlider は手軽にかんたんにスライドショーを導入したい人向けの jQuery プラグインになります。
ECサイトやコーポレートサイト、ブログサイトにも幅広く活用できることからとても人気のあるスライドショープラグインです。

この記事では、ファイルのダウンロードからサイトへの導入、細かい設定ができるオプション設定等を
初心者の方でもわかりやすく説明しています。

正常に表示されない場合や動かない場合の対処法も説明していますので一度挫折した方もこの記事を読んでいただければ詳しくわかるはずです。是非ご参考ください。

スポンサードリンク

1.bxSlider のダウンロード

下記の公式サイトより「jquery.bxslider.zip」をダウンロードします。

http://bxslider.com/

ダウンロードした jquery.bxslider.zip のファイル構成は下記となります。

  • imagesフォルダ
  • pluginsフォルダ
  • bower.json
  • jquery.bxslider.css
  • jquery.bxslider.js
  • jquery.bxslider.min.js

2.bxSlider の設置

2-1.フォルダのディレクトリの確認

主に使用するファイルは下記になります。

  • imagesフォルダ
  • jquery.bxslider.css
  • jquery.bxslider.js 又は jquery.bxslider.min.js

images フォルダはページャーやローダーといったアイコンが入っています。
jsファイルに関しましては、どちらでも大丈夫ですので好きな方を選んでください。

下記はフォルダ階層を図にしたものとなります。

bxslider フォルダ階層

今回 cssフォルダと jsフォルダを用意しています。
imagesフォルダは jquery.bxslider.css と同じディレクトリに配置しましょう。

正しく表示されない理由として最も多いのがフォルダ階層とパスの設定ミスです。
まずは、上図を参考にして自分のファイル階層と比べてみてください。

2-2.head内の記述

head 内に下記ソースを記述しダウンロードしたファイルをリンクさせます。

1行目に関しては、jquery の CDN から jQuery を読み込んでいるので、ファイルをダウンロードする必要はありません。そのままコピペでOKです。

2,3行目に関しては、1でダウンロードしたファイルを使用しています。

続いて bxSlider を読み込むためのソースを記述します。

これで head 内の記述は完了です。

2-3.body 内の記述

続いて HTML内に下記ソースを記述し、画像ファイル等を表示させます。

bxslider を読み込むためのソースで記述したid名と同じにします。
今回の場合は sample というid設定をし、画像サイズは 600 × 400 の画像を使用しています。

  • id でも class でも動作は可能
  • 上記の画像枚数は4枚ですが、好みによって増減可能

これで下記のようなとりあえずのスライドショーが実装されます。

bxslider レイアウト

全体の HTMLソースは下記となります。

3.css でレイアウトを整える

前述で表示させたスライドショーは左に寄ってしまっています。
スライドショーの表示領域である bx-viewport の width が100%になっているためです。

jquery.bxslider.css の最下部へ下記ソースを記述します。

#sample_wrap は画像幅と同様にします。
今回の場合は 600×400 の画像を設定してますので width は 600px としています。

margin:0 auto; はお好みで記述してください。

これで bxSlider スライドショーが完成となります。

bxSlider スライドショー

4.スライドショーが動作しない場合

ここまでの作業を行えば問題なくスライドショーが実装されているはずです。
しかし、正常に動作していない、レイアウトが崩れるという場合はどこか記述ミスがあります。
下記項目はよくある記述ミスなどになるので動作しない場合は確認してみてください。

4-1.ソースの記述ミス

あまり慣れていない方にとっては見慣れないコードがたくさんあるはずです。

  • 全角スペースになっていないか
  • 記述する場所は間違いないか
  • タグ等の記述に誤りはないか

上記をじっくりと確認してみましょう。

4-2.ファイルの指定先

おそらくこれが一番多い原因かと思います。
記述したソースの場所に表示したいファイルや読み込みたいファイルがない場合が多いです。

2-1で説明したとおりのフォルダ階層にしていれば問題なく表示はされますので参考にしてください。

5.オプションについて

bxlider には様々なオプションはあります。
下記は自動再生でスライドモードを fade にしたソースとなります。

基本的なスライドショーの場合は特に設定は必要ありませんが好みに応じて設定しましょう。
下記は基本的用途ならこれで十分というオプションを日本語でまとめたものです。

5-1.基本オプション

  • mode(スライドモード)
  • default: ‘horizontal’
    options: ‘horizontal’, ‘vertical’, ‘fade’

  • speed(スライドスピード)
  • default: 500(ミリ秒)この場合は5秒

  • infiniteLoop(無限ループ)
  • default: true
    options: true / false

  • captions(画像下部説明文)
  • default: false
    options: true / false

  • randomStart(スライド開始画像をランダム)
  • default: false
    options: true / false

  • responsive(レスポンシブ)
  • default: true
    options: true / false

  • touchEnabled(スワイプ)
  • default: true
    options: true / false

5-2.ページャーオプション

  • pager(ページャー)
  • default: true
    options: true / false

5-3.コントロールオプション

  • controls(コントロール)
  • default: true
    options: true / false

  • nextText(次へ)
  • default: ‘Next’

  • prevText(前へ)
  • default: ‘Prev’

  • autoControls(自動偏移の表示)
  • default: false
    options: true / false

4-4.オートオプション

  • auto(自動再生)
  • default: false
    options: true / false

  • pause(停止時間)
  • default: 4000(ミリ秒)この場合4秒

  • autoHover(マウスホバー時ストップ)
  • default: false
    options: true / false

まとめ

この記事で説明している方法以外にも導入方法はたくさんありますが、個人的に一番わかりやすい方法を説明してます。
bxSliderは汎用性の高いjQueryプラグインになります。
導入も他のスライドショープラグインに比べてかんたんで情報も多いと思います。

スライドショーはサイトのイメージを大きく左右する要素となりますので、あまりオプションを付けすぎないことをオススメします。

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

SNSでもご購読できます。