オプションで自分好みにカスタマイズ！bxsliderの使い方
こんにちは！
Webデザイナーのノザキです。
前のブログで、Webサイトに動きがあると「かっこいい！」と思ってしまうと公言していました。
はい。今も同じように考えています（笑）
今回お話ししたいのは、オプションがたくさんある『bxslider』についてです。
オプションを任意で設定するだけで、動きや見た目に変化を与えることができます。
また、レスポンシブWebデザインにも対応しているため、今の時代にピッタリですね！
初心者の方でも簡単に設置できますので、是非試してみてください！
まずbxsliderをダウンロードしよう！
下記のサイトから『bxslider』をダウンロードしましょう。
http://bxslider.com/
ダウンロードしたフォルダを見てみよう
ダウンロードしたフォルダには、いくつかのファイルが入っています。
ですが、とりあえず使用するものは下記になります。
- jquery.bxslider.css
- jquery.bxslider.min.js
- imagesフォルダ内の画像
また、指定するオプションによっては下記のファイルも必要になります。
- jquery.easing.1.3.js
- jquery.fitvids.js
head内に読み込ませるファイルを記述
必要なファイルをhead内に読み込ませます。
ファイルの階層はご自身のものに合わせてあげてください。
※下記ではjQuery本体はajaxを使用しております。
|
1 2 3 4 5 |
<link rel="stylesheet" href="common/css/jquery.bxslider.css" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="common/js/jquery.easing.1.3.js"></script> <script src="common/js/jquery.fitvids.js"></script> <script src="common/js/jquery.bxslider.min.js"></script> |
head内にスクリプトを記述
これを記述しないとスライダーが動かないので、忘れないようにしましょう。
また、オプションでいろいろ追加する際に、こちらに追記していくようになります。
下記の記述は、ノーマルなデフォルト設定になります。
|
1 2 3 4 5 |
<script> $(document).ready(function(){ $('.bxslider').bxSlider(); }); </script> |
HTMLにスライドさせたいものを記述
ここではクラスを「bxslider」としてあります。
この時点で、デフォルト設定でスライダーが動きます。
|
1 2 3 4 5 |
<ul class="bxslider"> <li><img src="common/images/photo01.jpg"></li> <li><img src="common/images/photo02.jpg"></li> <li><img src="common/images/photo03.jpg"></li> </ul> |
もっとスライダーをカスタマイズしたい
オプションを使用して、スライダーをカスタマイズしたい方は下記を参考にしてみてください。
mode
modeは、「vertical」、「fade」、「horizontal」の3種があります。
デフォルトでは「horizontal」になっています。
|
1 2 3 4 5 6 7 |
<script> $(document).ready(function(){ $('.bxslider').bxSlider({ mode: 'vertical' }); }); </script> |
|
1 2 3 4 5 6 7 |
<script> $(document).ready(function(){ $('.bxslider').bxSlider({ mode: 'fade' }); }); </script> |
|
1 2 3 4 5 6 7 |
<script> $(document).ready(function(){ $('.bxslider').bxSlider({ mode: 'horizontal' }); }); </script> |
スライドの無限ループ
こちらを設定することで、スライダーを永遠にループさせることができます。
デフォルトは「false」になっています。
|
1 2 3 4 5 6 7 |
<script> $(document).ready(function(){ $('.bxslider').bxSlider({ infiniteLoop: true }); }); </script> |
「前へ」と「次へ」のコントロール表示を制御
こちらは、スライドが無限ループの設定ではないときに発動します。
一番目のスライドが表示されている時は「前へ」が非表示になり、最後のスライドが表示されている時は「次へ」が非表示になります。
「true」か「false」で設定します。
|
1 2 3 4 5 6 7 |
<script> $(document).ready(function(){ $('.bxslider').bxSlider({ hideControlOnEnd: true }); }); </script> |
speed
スライド時のスピードを設定できます。
デフォルトは「500」です。
お好みのスピードに調節してみてください。
|
1 2 3 4 5 6 7 |
<script> $(document).ready(function(){ $('.bxslider').bxSlider({ speed: 1000 }); }); </script> |
startSlide
どのイメージ画像からスライドを開始させるかを設定できます。
デフォルトでは「0」になっています。
|
1 2 3 4 5 6 7 |
<script> $(document).ready(function(){ $('.bxslider').bxSlider({ startSlide: 3 }); }); </script> |
randomStart
どのイメージ画像からスライドを開始させるかランダムにすることができます。
デフォルトでは、「false」になっています。
|
1 2 3 4 5 6 7 |
<script> $(document).ready(function(){ $('.bxslider').bxSlider({ randomStart: true }); }); </script> |
slideMargin
スライドとスライドの間隔を指定できます。
デフォルトでは「0」になっています。
|
1 2 3 4 5 6 7 |
<script> $(document).ready(function(){ $('.bxslider').bxSlider({ slideMargin: 10 }); }); </script> |
ticker
継続的にスライドし続けることができます。
デフォルトでは「false」になっています。
|
1 2 3 4 5 6 7 |
<script> $(document).ready(function(){ $('.bxslider').bxSlider({ ticker: true }); }); </script> |
captions
キャプションを表示できます。
タイトルのような表示がイメージ画像に表示されます。
title部分に表示させたい内容を記述しましょう。
デフォルトでは「false」になっています。
|
1 2 3 4 5 |
<ul class="bxslider"> <li><img src="common/images/photo01.jpg" title="キャプション01"></li> <li><img src="common/images/photo02.jpg" title="キャプション02"></li> <li><img src="common/images/photo03.jpg" title="キャプション03"></li> </ul> |
|
1 2 3 4 5 6 7 |
<script> $(document).ready(function(){ $('.bxslider').bxSlider({ captions: true }); }); </script> |
pager
ページャーの表示・非表示を設定することができます。
デフォルトでは「true」になっています。
|
1 2 3 4 5 6 7 |
<script> $(document).ready(function(){ $('.bxslider').bxSlider({ pager: false }); }); </script> |
controls
コントロールの表示・非表示を設定することができます。
デフォルトでは「true」になっています。
|
1 2 3 4 5 6 7 |
<script> $(document).ready(function(){ $('.bxslider').bxSlider({ controls: false }); }); </script> |
auto
自動でスライドすることができます。
デフォルトでは「false」になっています。
|
1 2 3 4 5 6 7 |
<script> $(document).ready(function(){ $('.bxslider').bxSlider({ auto: true }); }); </script> |
autoControls
Stop, Startのコントロールを表示する事ができます。
デフォルトでは「false」になっています。
|
1 2 3 4 5 6 7 8 |
<script> $(document).ready(function(){ $('.bxslider').bxSlider({ auto: true, autoControls: true }); }); </script> |
minSlides/maxSlides
「minSlides」はカルーセルの際に表示するスライドの最低数を設定できます。
「maxSlides」はカルーセルの際に表示するスライドの最大数を設定できます。
どちらもデフォルトでは「0」になっています。
|
1 2 3 4 5 6 7 8 |
<script> $(document).ready(function(){ $('.bxslider').bxSlider({ maxSlides: 3, minSlides: 3 }); }); </script> |
slideWidth
カルーセルの際に表示するスライドの幅を設定できます。
デフォルトでは「0」になっています。
|
1 2 3 4 5 6 7 8 9 |
<script> $(document).ready(function(){ $('.bxslider').bxSlider({ slideWidth: 300, maxSlides: 3, minSlides: 3 }); }); </script> |
moveSlides
カルーセルの際に表示するスライドさせる要素の数を設定できます。
デフォルトでは「0」になっています。
|
1 2 3 4 5 6 7 8 9 10 |
<script> $(document).ready(function(){ $('.bxslider').bxSlider({ slideWidth: 300, maxSlides: 3, minSlides: 3, moveSlides: 2 }); }); </script> |
タッチデバイスに対応させるオプション
touchEnabled
スワイプ時でもスライドできるようにする。
|
1 2 3 4 5 6 7 |
<script> $(document).ready(function(){ $('.bxslider').bxSlider({ touchEnabled: true }); }); </script> |
oneToOneTouch
スワイプの動きとイメージ画像のスライドを対応させ、スワイプ動作にイメージ画像が連動するようなスライドを設定できる。
|
1 2 3 4 5 6 7 |
<script> $(document).ready(function(){ $('.bxslider').bxSlider({ oneToOneTouch: true }); }); </script> |
preventDefaultSwipeX
X軸方向へのデフォルトのスワイプ操作の動きを制御し、イメージ画像をスワイプしても画面自体はスワイプしないように設定できる。
|
1 2 3 4 5 6 7 |
<script> $(document).ready(function(){ $('.bxslider').bxSlider({ preventDefaultSwipeX: true }); }); </script> |
さいごに
『bxslider』は簡単に実装でき、なおかつオプションも豊富にあるため、自分好みの動きを実現できると思います。
是非、実装してみてください！