オプションで自分好みにカスタマイズ!bxsliderの使い方

img_top

こんにちは!
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を使用しております。

head内にスクリプトを記述

これを記述しないとスライダーが動かないので、忘れないようにしましょう。
また、オプションでいろいろ追加する際に、こちらに追記していくようになります。
下記の記述は、ノーマルなデフォルト設定になります。

HTMLにスライドさせたいものを記述

ここではクラスを「bxslider」としてあります。
この時点で、デフォルト設定でスライダーが動きます。

もっとスライダーをカスタマイズしたい

オプションを使用して、スライダーをカスタマイズしたい方は下記を参考にしてみてください。

mode

modeは、「vertical」、「fade」、「horizontal」の3種があります。
デフォルトでは「horizontal」になっています。

スライドの無限ループ

こちらを設定することで、スライダーを永遠にループさせることができます。
デフォルトは「false」になっています。

「前へ」と「次へ」のコントロール表示を制御

こちらは、スライドが無限ループの設定ではないときに発動します。
一番目のスライドが表示されている時は「前へ」が非表示になり、最後のスライドが表示されている時は「次へ」が非表示になります。
「true」か「false」で設定します。

speed

スライド時のスピードを設定できます。
デフォルトは「500」です。
お好みのスピードに調節してみてください。

startSlide

どのイメージ画像からスライドを開始させるかを設定できます。
デフォルトでは「0」になっています。

randomStart

どのイメージ画像からスライドを開始させるかランダムにすることができます。
デフォルトでは、「false」になっています。

slideMargin

スライドとスライドの間隔を指定できます。
デフォルトでは「0」になっています。

ticker

継続的にスライドし続けることができます。
デフォルトでは「false」になっています。

captions

キャプションを表示できます。
タイトルのような表示がイメージ画像に表示されます。
title部分に表示させたい内容を記述しましょう。
デフォルトでは「false」になっています。

pager

ページャーの表示・非表示を設定することができます。
デフォルトでは「true」になっています。

controls

コントロールの表示・非表示を設定することができます。
デフォルトでは「true」になっています。

auto

自動でスライドすることができます。
デフォルトでは「false」になっています。

autoControls

Stop, Startのコントロールを表示する事ができます。
デフォルトでは「false」になっています。

minSlides/maxSlides

「minSlides」はカルーセルの際に表示するスライドの最低数を設定できます。
「maxSlides」はカルーセルの際に表示するスライドの最大数を設定できます。
どちらもデフォルトでは「0」になっています。

slideWidth

カルーセルの際に表示するスライドの幅を設定できます。
デフォルトでは「0」になっています。

moveSlides

カルーセルの際に表示するスライドさせる要素の数を設定できます。
デフォルトでは「0」になっています。

タッチデバイスに対応させるオプション

touchEnabled

スワイプ時でもスライドできるようにする。

oneToOneTouch

スワイプの動きとイメージ画像のスライドを対応させ、スワイプ動作にイメージ画像が連動するようなスライドを設定できる。

preventDefaultSwipeX

X軸方向へのデフォルトのスワイプ操作の動きを制御し、イメージ画像をスワイプしても画面自体はスワイプしないように設定できる。

さいごに

『bxslider』は簡単に実装でき、なおかつオプションも豊富にあるため、自分好みの動きを実現できると思います。
是非、実装してみてください!