こんにちは。
jQueryプラグイン「bxSlider」のいろいろなオプションの使い方のまとめ！です。
簡単にいろいろなスライダーを実装できる事で人気にjQueryプラグイン「bxSlider」。
けっこう頻繁に使う事があるので、いろいろなオプションをまとめてみました！
※当サイトはアフィリエイト広告を利用していますが、当サイトが独自に作成した記事であり、第三者から依頼を受けたものではありません。
jQueryプラグイン「bxSlider」のいろいろなオプションの使い方のまとめ！
bxSliderをダウンロードしてみよう！
下記のサイトの右上の「Downloas」のボタンをクリックしダウンロードします。
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]
mode
スライドモードを指定します。
‘horizontal’, ‘vertical’, ‘fade’の3種類あります。
デフォルトはhorizontalです。
vertical
jquery.bxslider.min.jsの下に下記のスクリプトを記述します。
[javascript]
[/javascript]
fade
jquery.bxslider.min.jsの下に下記のスクリプトを記述します。
[javascript]
[/javascript]
speed
一回のスライドにかかる時間をミリ秒で指定します。
デフォルトは500です。
jquery.bxslider.min.jsの下に下記のスクリプトを記述します。
[javascript]
[/javascript]
slideMargin
スライドとスライドのマージンを指定します。
デフォルトは0です。
jquery.bxslider.min.jsの下に下記のスクリプトを記述します。
[javascript]
[/javascript]
startSlide
どの画像からスタートするか指定します。
デフォルトは0です。
jquery.bxslider.min.jsの下に下記のスクリプトを記述します。
[javascript]
[/javascript]
randomStart
どの画像からスタートするかランダムにする事ができます。
デフォルトはfalseです。
jquery.bxslider.min.jsの下に下記のスクリプトを記述します。
[javascript]
[/javascript]
infiniteLoop
スライドを無限ループにする事ができます。
デフォルトはtureです。
jquery.bxslider.min.jsの下に下記のスクリプトを記述します。
[javascript]
[/javascript]
hideControlOnEnd
スライドが最初の時に、「前へ」のリンクとスライドが最後の時に、「次へ」のリンクを消す事ができます。
デフォルトはfalseです。
jquery.bxslider.min.jsの下に下記のスクリプトを記述します。
[javascript]
[/javascript]
captions
キャプションを表示する事ができます。
デフォルトはfalseになります。
title属性にキョプションを記述します。
[html]
[/html]
jquery.bxslider.min.jsの下に下記のスクリプトを記述します。
[javascript]
[/javascript]
ticker
継続的にスライドし続けます。
デフォルトはfalseです。
jquery.bxslider.min.jsの下に下記のスクリプトを記述します。
[javascript]
[/javascript]
pager
ページャーを表示するかどうか指定します。
デフォルトはtrueです。
jquery.bxslider.min.jsの下に下記のスクリプトを記述します。
[javascript]
[/javascript]
pagerType
ページャの種類を指定します。
‘full’, ‘short’の2種類あります。
デフォルトは’full’です。
jquery.bxslider.min.jsの下に下記のスクリプトを記述します。
[javascript]
[/javascript]
controls
コントロールを表示するかどうかを指定します。
デフォルトはtrueです。
jquery.bxslider.min.jsの下に下記のスクリプトを記述します。
[javascript]
[/javascript]
nextText
「次へ」ボタンのテキストを指定する事ができます。
デフォルトは’Next’です。
jquery.bxslider.min.jsの下に下記のスクリプトを記述します。
[javascript]
[/javascript]
PrevText
「前へ」ボタンのテキストを指定する事ができます。
デフォルトは’Prev’です。
jquery.bxslider.min.jsの下に下記のスクリプトを記述します。
[javascript]
[/javascript]
autoControls
Stop, Startのコントロールを表示する事ができます。
デフォルトはfalseです。
jquery.bxslider.min.jsの下に下記のスクリプトを記述します。
[javascript]
[/javascript]
startText
「スタート」ボタンのテキストを指定する事ができます。
デフォルトは’Start’です。
jquery.bxslider.min.jsの下に下記のスクリプトを記述します。
[javascript]
[/javascript]
stopText
「ストップ」ボタンのテキストを指定する事ができます。
デフォルトは’Stop’です。
jquery.bxslider.min.jsの下に下記のスクリプトを記述します。
[javascript]
[/javascript]
auto
自動でスライドする事ができます。
デフォルトは’false’です。
jquery.bxslider.min.jsの下に下記のスクリプトを記述します。
[javascript]
[/javascript]
pause
自動でスライドする時の間隔（停止時間）をミリ秒で指定する事ができます。
デフォルトは4000です。
jquery.bxslider.min.jsの下に下記のスクリプトを記述します。
[javascript]
[/javascript]
minSlides
カルーセルの際に表示するスライドの最低数を指定する事ができます。
デフォルトは0です。
jquery.bxslider.min.jsの下に下記のスクリプトを記述します。
[javascript]
[/javascript]
maxSlides
カルーセルの際に表示するスライドの最大数を指定する事ができます。
デフォルトは0です。
jquery.bxslider.min.jsの下に下記のスクリプトを記述します。
[javascript]
[/javascript]
slideWidth
カルーセルの際に表示するスライドの幅を指定する事ができます。
デフォルトは0です。
jquery.bxslider.min.jsの下に下記のスクリプトを記述します。
[javascript]
[/javascript]
moveSlides
カルーセルの際に表示するスライドさせる要素の数を指定する事ができます。
デフォルトは0です。
jquery.bxslider.min.jsの下に下記のスクリプトを記述します。
[javascript]
[/javascript]
その他のオプションは下記のページをご覧下さい。
Options | Responsive jQuery Slider | bxSlider
プラグインを使わないスキルを身につけたい人のためのjQueryテクニカルノート
さすがにたくさんありますね！
以上でjQueryプラグイン「bxSlider」のいろいろなオプションの使い方のまとめ！でした。
