読者です 読者をやめる 読者になる 読者になる

Miyakawa Blog

ウェブディレクターが日々のことを綴るブログ

デザイナでも簡単 bxSlider で jQuery 写真スライド

今日は某所で jQuery の写真スライドなどお分かりですか? という質問を受けることがありました。

いつも検索して適当に準備するか、プログラマに任せていたので自分なりに使いやすいモノをちょっと調べてアーカイブしておこうと思いました。

bxSlider という jQuery Plugin が良さげですね。 プラグインファイルを読み込んで、JavaScript でオプション指定するだけでレスポンシブデザインに対応しているし、ページャーや次へのボタンの設定も簡単にできそうなので。 デザイナーの人にも優しいことでしょう。

jQuery Content Slider | Responsive jQuery Slider | bxSlider http://bxslider.com

ページ右上の「Download」もしくは、ページ右側の「View on Github」から必要なファイルをダウンロードします。

Step1: 必要ファイルを head 内部にリンクします

jQueryは 1.8.2 本体と、bxslider の js ファイルと、 css ファイルをダウンロードして、html ファイルに Link をします。 ※ローカルで実験しましたが、jQuery 1.8.3, 1.10.1, 2.0.2 でも動作は確認できました。

<!-- jQuery library (served from Google) -->
http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js
<!-- bxSlider Javascript file -->
http://js/jquery.bxslider.min.js
<!-- bxSlider CSS file -->
<link href="lib/jquery.bxslider.css" rel="stylesheet">

Step2: body 部分に Slider の表示部分となる HTML をマークアップします。

画像やビデオ、その他の HTML を差し込めます。

<ul class="bxslider">
  <li><img src="images/pic1.jpg" /></li>
  <li><img src="images/pic2.jpg" /></li>
  <li><img src="images/pic3.jpg" /></li>
  <li><img src="images/pic4.jpg" /></li>
</ul>

Step3: bxslider を呼び出す

bxslider() 部分に <ul class="bxslider"> を呼び出します。

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

詳しい設定

Examples | Responsive jQuery Slider | bxSlider http://bxslider.com/examples

このページにアクセすると様々な設定方法が参考として書かれています。

例えば、「2. Auto show with start / stop controls」にあるように次のようにオプションを追加すると、auto(自動再生)とコントローラー(一時停止と再生)ボタンを表示してくれます。

$(document).ready(function(){
    $('.bxslider').bxSlider({
        auto: true,
        autoControls: true
    });
});

より詳しいオプション方法は次のページを見て確認ができます。

Options | Responsive jQuery Slider | bxSlider http://bxslider.com/options

また、日本語で解説されたページも1つだけ紹介しておきます。 スライダーのプラグイン・bxSliderを実装する | FSFIELD Labs http://www.fsfield.info/develop/javascript/014/