jQueryで簡単実装できるスライダー。bxSliderの使い方とオプション
サイト制作でいろいろな動きを付けたい時にjQueryを使うことが多いです。今回は、そんなjQueryでスライダーを実装する方法をご紹介します。
また、今回ご紹介するjQueryのスライダーは「bxSlider」です。スライダーの中でも簡単に実装ができ、オプションも豊富にあるため、カスタマイズしやすくなっています。
他にも使いやすいスライダーもありますが、jQueryを複数使うと相性がよくなかったり動かなかったりする場合があります。そんな時に、自分で修正するよりも、別のスライダーを入れる方が早いこともあるので、スライダーを何種類か使えるようにしておくのも制作する上でポイントになります。
「bxSlider」を自分が使えるスライダーの１つにしておきましょう。
bxSliderのダウンロード
まずはbxSliderをダウウンロードしてきましょう。
bxSliderのダウンロードサイトで「Click here to install」をクリックし、「Download jquery.bxslider.zip here」というリンクをクリックすることでbxSliderのzipファイルで一式をダウウンロードできます。
最低限必要なファイルがこちらです。
distフォルダ内
- jquery.bxslider.css
- jquery.bxslider.js
- imagesフォルダ内の画像
bxSliderの使い方と設定
bxSliderのcssとjsを設定します。サーバー内にアップロードしたファイルを読み込みます。
|
1 2 |
<link rel="stylesheet" href="css/jquery.bxslider.css"> <script src="js/jquery.bxSlider.js"></script> |
スライダーの表示したいページのhtmlのheadタグ内に上記の2つを記載します。
次に、上記の2行の下部に下記を記述してください。
|
1 2 3 4 5 |
<script> $(document).ready(function(){ $('.bxslider').bxSlider(); }); </script> |
表示した場所にスライドさせる画像を記述します。（body内の表示させる場所）
|
1 2 3 4 5 6 |
<ul class="bxslider"> <li><img src="img/sample01.jpg" alt="sample01"></li> <li><img src="img/sample02.jpg" alt="sample02"></li> <li><img src="img/sample03.jpg" alt="sample03"></li> <li><img src="img/sample04.jpg" alt="sample04"></li> </ul> |
上記の3ステップでスライダーを実装することができます。スライダー自体を実装するのは簡単ですが、ここからカスタマイズなどを行うことになります。
bxSlider実装の解説
|
1 2 3 4 5 |
<script> $(document).ready(function(){ $('.bxslider').bxSlider(); }); </script> |
上記の$(‘.bxslider’)この部分はクラス名でbxsliderと記載していることになります。ここでクラス指定をすることで、表示させたい<ul>のクラス名と紐づけすることになります。
|
1 2 3 4 5 6 |
<ul class="bxslider"> <li><img src="img/sample01.jpg" alt="sample01"></li> <li><img src="img/sample02.jpg" alt="sample02"></li> <li><img src="img/sample03.jpg" alt="sample03"></li> <li><img src="img/sample04.jpg" alt="sample04"></li> </ul> |
クラス名だけでスライダーの指定をするため、１つのページでbxsliderを複数設置することも可能になります。
これを理解しているだけでbxsliderを使えるようになったも同然です！
ページにbxSliderを複数設置
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<link rel="stylesheet" href="css/jquery.bxslider.css"> <script src="js/jquery.bxSlider.js"></script> <script type="text/javascript"> $(function(){ var firstSlider = $('.bxslider1').bxSlider({ auto: true, pause: 4000, speed: 1000, pager: false, infiniteLoop: true, mode: 'fade' }); var secondSlider = $('.bxslider2').bxSlider({ auto: true, pause: 4000, speed: 1000, pager: false, infiniteLoop: true, mode: 'fade' }); }); </script> |
|
1 2 3 4 5 6 7 8 |
<ul class="bxslider1"> <li><img src="img/sample01.jpg" alt="sample01"></li> <li><img src="img/sample02.jpg" alt="sample02"></li> </ul> <ul class="bxslider2"> <li><img src="img/sample03.jpg" alt="sample03"></li> <li><img src="img/sample04.jpg" alt="sample04"></li> </ul> |
このようなクラス名を変えるだけで複数動かす事も可能です。
上記はscriptで複数指定してるところにオプションを記載していますが、この段階ではスルーしてください。次の項目でオプションをご紹介します。
bxSliderのオプション
まず、オプション設定方法が下記のように記述します。
|
1 2 3 4 5 6 7 8 9 |
<script> $(document).ready(function(){ $('.bxslider').bxSlider({ プロパティ01: プロパティ01の値, プロパティ02: プロパティ02の値, プロパティ03: プロパティ03の値, プロパティ04: プロパティ04の値 }); </script> |
プロパティと値を記述するだけでbxsliderを簡単にカスタマイズすることができます。
bxsliderのオプション一覧
下記のオプションは一部になります。この他にもオプションはたくさんありますので調べてみてください。
今回記載しているオプションは、使用頻度が高いものを抜粋して記載しています。
| プロパティ | 値 | 説明 |
|---|---|---|
| mode | horizontal・vertical・fade | スライド方法：横スライド・縦スライド・フェードイン/アウトを選べる |
| speed | 数値（1500等） | スライドのスピード（ミリ秒単位） デフォルト：500 |
| auto | true・false | 自動でスライドさせる デフォルト：false |
| pause | 数値（4500等） | 画像が切り替わる時間 デフォルト：4000 |
| responsive | true・false | レスポンシブに対応の設定 デフォルト：true |
| infiniteLoop | true・false | スライドのループ設定 デフォルト：true |
| touchEnabled | true・false | タッチスワイプの有無 デフォルト：true |
| pager | true・false | ページ送りボタンの表示or非表示 デフォルト：true |
| controls | true・false | 前後のコントロールの追加の有無 デフォルト：true |
| autoHover | true・false | ホバーした時にスライドを止めるか動かすか デフォルト：true |
| randomStart | true・false | ランダムにスタートさせるかどうか |
| preloadImages | all・visible | 画像読み込みのタイミング all(最初に全て)・visible（最初の画像を先に） |
どうでしたか？長々と説明やオプションなどを記載しましたが、実装するには簡単なスライダーになっています。
jQueryのスライダーを1つでも簡単に実装できるようにして、実務に活かしてみてください。