プラカンブログSTAFF BLOG

2015.09.11

「bxSlider」の使い方 ~スライダー、カールセル、レスポンシブにも便利~

title

こんにちは。デザイナーの(鈴)です。
あっという間に5回目のブログ登場。

今回は「使い方」シリーズの復活です!
「bxSlider」というプラグインを紹介します。
スライダーを導入する際によくお世話になっています。
IEにも幅広く対応しており、数年前から助けられています。
(一例ですが、弊社で導入したサイト例1サイト例2

「bxSlider」とは

スライダープラグインで、カルーセルにも対応しています。
特に設置方法が簡単です。
さらにレスポンシブにも対応しており、
オプションも充実しているので幅広く活躍できます。

「bxSlider」の使い方

必要なファイルを下記公式ページの右上の「Download」から一式ダウンロード。
http://bxslider.com/

ダウンロードしたファイルから下記2つを読み込みます。
jquery.bxslider.css
jquery.bxslider.min.js

読み込む記述は下記のようになります。
※jQuery本体ファイルの読み込みを忘れずに!



JavaScriptの記述方法

基本的にはhead内か外部JSとして下記のコードを記述すれば、イベントが実行されます。
例として「bxslider」というclass名にしていますが、idやclassでも可能で、自由に指定できます。

htmlの記述方法

イベントを発生させたい要素をHTML内に記述します。

こちらも例として「bxslider」というclass名にしていますが、
前述のスクリプトの指定と合わせていれば自由に指定可能です。
また「.bxSlider()」を呼び出す要素(スライドを囲む要素)は
「ul」を使用していますが、「div」も可能です。

「bxSlider」の基本的な実装は以上になります。

オプション

細かい設定のオプションが数多く用意されており、
カルーセル用のオプションや「Callbacks」も豊富です。
今回はよく使うオプションのみを紹介しますが、
詳細は公式ページを参照ください。

mode スライド方法を設定
「horizontal」 横方向のスライド(初期値)
「vertical」 縦方向のスライド
「fade」 フェードでの切り替え
infiniteLoop スライドをループさせるかどうかの設定
初期値は「true」
responsive レスポンシブに対応するかどうかの設定
初期値は「true」
touchEnabled タッチスワイプを許可するかを設定
初期値は「true」
pager ページ送りを追加するかどうかの設定
初期値は「true」
controls 前後のコントロールを追加するかどうかの設定。
初期値は「true」
nextText nextのテキストを設定
初期値は「Next」
prevText prevのテキストを設定
初期値は「Prev」
auto 自動スライドの設定
初期値は「false」
pause 自動スライドの待ち時間の設定
初期値は「4000」

実装してみて

かなり簡単に実装できるライブラリです。
jQuery初心者でも安心!!
カルーセルやレスポンシブに対応しているのも嬉しいところです。

さらにjqueryのバージョンが古くても(1.9では検証済み)動くので、
古いバージョンが限られているときにも便利ですよ。
スライダーで困っている時はぜひ試してみてください!!

今まで「bxSlider」に頼り切っていたので、
そろそろ新しいライブラリも探してみようと思います。
いいのが見つかれば紹介します!!

それではまたの機会に!

参考リンク

下記サイトは参考にしたサイトになります。
使い方もかなり詳しく紹介しています。

http://www.webdesignleaves.com/wp/jquery/843/
https://narugaro.wordpress.com/2014/01/16/%E7%B0%A1%E5%8D%98%EF%BC%81bxslider%E3%81%A7%E3%82%B9%E3%83%A9%E3%82%A4%E3%83%89%E3%82%B7%E3%83%A7%E3%83%BC%E3%82%92%E4%BD%9C%E6%88%90/
http://yane-ni-kabochano.com/blog/?p=7
http://cly7796.net/wp/javascript/plugin-jquery-bxslider/

 

この記事は、SUZUKI が書きました。