jQueryプラグイン「bxSlider」のいろいろなオプションの使い方のまとめ!

2015/05/17

こんにちは。
jQueryプラグイン「bxSlider」のいろいろなオプションの使い方のまとめ!です。

簡単にいろいろなスライダーを実装できる事で人気にjQueryプラグイン「bxSlider」。
けっこう頻繁に使う事があるので、いろいろなオプションをまとめてみました!

jQueryプラグイン「bxSlider」のいろいろなオプションの使い方のまとめ!

bxSliderをダウンロードしてみよう!

下記のサイトの右上の「Downloas」のボタンをクリックしダウンロードします。

bxSlider_fade

jQuery Content Slider | Responsive jQuery Slider | bxSlider

 

bxSliderを設置してみよう!

ダウンロードしたファイルのjquery.bxslider.min.jsとjquery.bxslider.cssとimagesを設置します。
jquery.bxslider.cssをhead内に読み込ませます。

[html] [/html]

 

jQuery本体、jquery.bxslider.min.jsを/bodyの手前に読み込みます。

[javascript]


[/javascript]

 

画像部分をマークアップします。

[html]

[/html]

 

ノーマル

bxSliderのノーマルの設定をします。
jquery.bxslider.min.jsの下に下記のスクリプトを記述します。

[javascript]

[/javascript]

DEMO

 

mode

スライドモードを指定します。
‘horizontal’, ‘vertical’, ‘fade’の3種類あります。
デフォルトはhorizontalです。

 

vertical

jquery.bxslider.min.jsの下に下記のスクリプトを記述します。

[javascript]

[/javascript]

DEMO

 

fade

jquery.bxslider.min.jsの下に下記のスクリプトを記述します。

[javascript]

[/javascript]

DEMO

 

speed

一回のスライドにかかる時間をミリ秒で指定します。
デフォルトは500です。

jquery.bxslider.min.jsの下に下記のスクリプトを記述します。

[javascript]

[/javascript]

DEMO

 

slideMargin

スライドとスライドのマージンを指定します。
デフォルトは0です。

jquery.bxslider.min.jsの下に下記のスクリプトを記述します。

[javascript]

[/javascript]

DEMO

 

startSlide

どの画像からスタートするか指定します。
デフォルトは0です。

jquery.bxslider.min.jsの下に下記のスクリプトを記述します。

[javascript]

[/javascript]

DEMO

 

randomStart

どの画像からスタートするかランダムにする事ができます。
デフォルトはfalseです。

jquery.bxslider.min.jsの下に下記のスクリプトを記述します。

[javascript]

[/javascript]

DEMO

 

infiniteLoop

スライドを無限ループにする事ができます。
デフォルトはtureです。

jquery.bxslider.min.jsの下に下記のスクリプトを記述します。

[javascript]

[/javascript]

DEMO

 

hideControlOnEnd

スライドが最初の時に、「前へ」のリンクとスライドが最後の時に、「次へ」のリンクを消す事ができます。
デフォルトはfalseです。

jquery.bxslider.min.jsの下に下記のスクリプトを記述します。

[javascript]

[/javascript]

DEMO

 

captions

キャプションを表示する事ができます。
デフォルトはfalseになります。

title属性にキョプションを記述します。

[html]

[/html]

 

jquery.bxslider.min.jsの下に下記のスクリプトを記述します。

[javascript]

[/javascript]

DEMO



ticker

継続的にスライドし続けます。
デフォルトはfalseです。

jquery.bxslider.min.jsの下に下記のスクリプトを記述します。

[javascript]

[/javascript]

DEMO

 

pager

ページャーを表示するかどうか指定します。
デフォルトはtrueです。

jquery.bxslider.min.jsの下に下記のスクリプトを記述します。

[javascript]

[/javascript]

DEMO

 

pagerType

ページャの種類を指定します。
‘full’, ‘short’の2種類あります。
デフォルトは’full’です。

jquery.bxslider.min.jsの下に下記のスクリプトを記述します。

[javascript]

[/javascript]

DEMO

 

controls

コントロールを表示するかどうかを指定します。
デフォルトはtrueです。

jquery.bxslider.min.jsの下に下記のスクリプトを記述します。

[javascript]

[/javascript]

DEMO

 

nextText

「次へ」ボタンのテキストを指定する事ができます。
デフォルトは’Next’です。

jquery.bxslider.min.jsの下に下記のスクリプトを記述します。

[javascript]

[/javascript]

DEMO

 

PrevText

「前へ」ボタンのテキストを指定する事ができます。
デフォルトは’Prev’です。

jquery.bxslider.min.jsの下に下記のスクリプトを記述します。

[javascript]

[/javascript]

DEMO

 

autoControls

Stop, Startのコントロールを表示する事ができます。
デフォルトはfalseです。

jquery.bxslider.min.jsの下に下記のスクリプトを記述します。

[javascript]

[/javascript]

DEMO

 

startText

「スタート」ボタンのテキストを指定する事ができます。
デフォルトは’Start’です。

jquery.bxslider.min.jsの下に下記のスクリプトを記述します。

[javascript]

[/javascript]

DEMO

 

stopText

「ストップ」ボタンのテキストを指定する事ができます。
デフォルトは’Stop’です。

jquery.bxslider.min.jsの下に下記のスクリプトを記述します。

[javascript]

[/javascript]

DEMO

 

auto

自動でスライドする事ができます。
デフォルトは’false’です。

jquery.bxslider.min.jsの下に下記のスクリプトを記述します。

[javascript]

[/javascript]

DEMO

 

pause

自動でスライドする時の間隔(停止時間)をミリ秒で指定する事ができます。
デフォルトは4000です。

jquery.bxslider.min.jsの下に下記のスクリプトを記述します。

[javascript]

[/javascript]

DEMO

 

minSlides

カルーセルの際に表示するスライドの最低数を指定する事ができます。
デフォルトは0です。

jquery.bxslider.min.jsの下に下記のスクリプトを記述します。

[javascript]

[/javascript]

DEMO

 

maxSlides

カルーセルの際に表示するスライドの最大数を指定する事ができます。
デフォルトは0です。

jquery.bxslider.min.jsの下に下記のスクリプトを記述します。

[javascript]

[/javascript]

DEMO

 

slideWidth

カルーセルの際に表示するスライドの幅を指定する事ができます。
デフォルトは0です。

jquery.bxslider.min.jsの下に下記のスクリプトを記述します。

[javascript]

[/javascript]

DEMO

 

moveSlides

カルーセルの際に表示するスライドさせる要素の数を指定する事ができます。
デフォルトは0です。

jquery.bxslider.min.jsの下に下記のスクリプトを記述します。

[javascript]

[/javascript]

DEMO

 

その他のオプションは下記のページをご覧下さい。
Options | Responsive jQuery Slider | bxSlider

 

プラグインを使わないスキルを身につけたい人のためのjQueryテクニカルノート
プラグインを使わないスキルを身につけたい人のためのjQueryテクニカルノート

 

さすがにたくさんありますね!
以上でjQueryプラグイン「bxSlider」のいろいろなオプションの使い方のまとめ!でした。

この記事を読んだ人はこんな記事も読んでいますよ