こんにちは。
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内に読み込ませます。
1 | <link href="./jquery.bxslider.css" rel="stylesheet"> |
jQuery本体、jquery.bxslider.min.jsを/bodyの手前に読み込みます。
1 2 | <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="./js/jquery.bxslider.min.js"></script> |
画像部分をマークアップします。
1 2 3 4 5 6 | <ul class="bxslider"> <li><img src="./images/sample1.jpg"></li> <li><img src="./images/sample2.jpg"></li> <li><img src="./images/sample3.jpg"></li> <li><img src="./images/sample4.jpg"></li> </ul> |
ノーマル
bxSliderのノーマルの設定をします。
jquery.bxslider.min.jsの下に下記のスクリプトを記述します。
1 2 3 4 5 | <script> $(document).ready(function(){ $('.bxslider').bxSlider(); }); </script> |
mode
スライドモードを指定します。
‘horizontal’, ‘vertical’, ‘fade’の3種類あります。
デフォルトはhorizontalです。
vertical
jquery.bxslider.min.jsの下に下記のスクリプトを記述します。
1 2 3 4 5 6 7 | <script> $(document).ready(function(){ $('.bxslider').bxSlider({ mode: 'vertical' }); }); </script> |
fade
jquery.bxslider.min.jsの下に下記のスクリプトを記述します。
1 2 3 4 5 6 7 | <script> $(document).ready(function(){ $('.bxslider').bxSlider({ mode: 'fade' }); }); </script> |
speed
一回のスライドにかかる時間をミリ秒で指定します。
デフォルトは500です。
jquery.bxslider.min.jsの下に下記のスクリプトを記述します。
1 2 3 4 5 6 7 | <script> $(document).ready(function(){ $('.bxslider').bxSlider({ speed: 2000 }); }); </script> |
slideMargin
スライドとスライドのマージンを指定します。
デフォルトは0です。
jquery.bxslider.min.jsの下に下記のスクリプトを記述します。
1 2 3 4 5 6 7 | <script> $(document).ready(function(){ $('.bxslider').bxSlider({ slideMargin: 10 }); }); </script> |
startSlide
どの画像からスタートするか指定します。
デフォルトは0です。
jquery.bxslider.min.jsの下に下記のスクリプトを記述します。
1 2 3 4 5 6 7 | <script> $(document).ready(function(){ $('.bxslider').bxSlider({ startSlide: 2 }); }); </script> |
randomStart
どの画像からスタートするかランダムにする事ができます。
デフォルトはfalseです。
jquery.bxslider.min.jsの下に下記のスクリプトを記述します。
1 2 3 4 5 6 7 | <script> $(document).ready(function(){ $('.bxslider').bxSlider({ randomStart: true }); }); </script> |
infiniteLoop
スライドを無限ループにする事ができます。
デフォルトはtureです。
jquery.bxslider.min.jsの下に下記のスクリプトを記述します。
1 2 3 4 5 6 7 | <script> $(document).ready(function(){ $('.bxslider').bxSlider({ infiniteLoop: false }); }); </script> |
hideControlOnEnd
スライドが最初の時に、「前へ」のリンクとスライドが最後の時に、「次へ」のリンクを消す事ができます。
デフォルトはfalseです。
jquery.bxslider.min.jsの下に下記のスクリプトを記述します。
1 2 3 4 5 6 7 8 | <script> $(document).ready(function(){ $('.bxslider').bxSlider({ infiniteLoop: false, hideControlOnEnd: true }); }); </script> |
captions
キャプションを表示する事ができます。
デフォルトはfalseになります。
title属性にキョプションを記述します。
1 2 3 4 5 6 | <ul class="bxslider"> <li><img src="./images/sample1.jpg" title="キャプション1"></li> <li><img src="./images/sample2.jpg" title="キャプション2"></li> <li><img src="./images/sample3.jpg" title="キャプション3"></li> <li><img src="./images/sample4.jpg" title="キャプション4"></li> </ul> |
jquery.bxslider.min.jsの下に下記のスクリプトを記述します。
1 2 3 4 5 6 7 | <script> $(document).ready(function(){ $('.bxslider').bxSlider({ captions: true }); }); </script> |
ticker
継続的にスライドし続けます。
デフォルトはfalseです。
jquery.bxslider.min.jsの下に下記のスクリプトを記述します。
1 2 3 4 5 6 7 | <script> $(document).ready(function(){ $('.bxslider').bxSlider({ ticker: true }); }); </script> |
pager
ページャーを表示するかどうか指定します。
デフォルトはtrueです。
jquery.bxslider.min.jsの下に下記のスクリプトを記述します。
1 2 3 4 5 6 7 | <script> $(document).ready(function(){ $('.bxslider').bxSlider({ pager: false }); }); </script> |
pagerType
ページャの種類を指定します。
‘full’, ‘short’の2種類あります。
デフォルトは’full’です。
jquery.bxslider.min.jsの下に下記のスクリプトを記述します。
1 2 3 4 5 6 7 | <script> $(document).ready(function(){ $('.bxslider').bxSlider({ pagerType: 'short' }); }); </script> |
controls
コントロールを表示するかどうかを指定します。
デフォルトはtrueです。
jquery.bxslider.min.jsの下に下記のスクリプトを記述します。
1 2 3 4 5 6 7 | <script> $(document).ready(function(){ $('.bxslider').bxSlider({ controls: false }); }); </script> |
nextText
「次へ」ボタンのテキストを指定する事ができます。
デフォルトは’Next’です。
jquery.bxslider.min.jsの下に下記のスクリプトを記述します。
1 2 3 4 5 6 7 | <script> $(document).ready(function(){ $('.bxslider').bxSlider({ nextText: '次へ' }); }); </script> |
PrevText
「前へ」ボタンのテキストを指定する事ができます。
デフォルトは’Prev’です。
jquery.bxslider.min.jsの下に下記のスクリプトを記述します。
1 2 3 4 5 6 7 | <script> $(document).ready(function(){ $('.bxslider').bxSlider({ prevText: '前へ' }); }); </script> |
autoControls
Stop, Startのコントロールを表示する事ができます。
デフォルトはfalseです。
jquery.bxslider.min.jsの下に下記のスクリプトを記述します。
1 2 3 4 5 6 7 8 | <script> $(document).ready(function(){ $('.bxslider').bxSlider({ auto: true, autoControls: true }); }); </script> |
startText
「スタート」ボタンのテキストを指定する事ができます。
デフォルトは’Start’です。
jquery.bxslider.min.jsの下に下記のスクリプトを記述します。
1 2 3 4 5 6 7 8 9 | <script> $(document).ready(function(){ $('.bxslider').bxSlider({ auto: true, autoControls: true, startText: 'スタート' }); }); </script> |
stopText
「ストップ」ボタンのテキストを指定する事ができます。
デフォルトは’Stop’です。
jquery.bxslider.min.jsの下に下記のスクリプトを記述します。
1 2 3 4 5 6 7 8 9 | <script> $(document).ready(function(){ $('.bxslider').bxSlider({ auto: true, autoControls: true, stopText: 'ストップ' }); }); </script> |
auto
自動でスライドする事ができます。
デフォルトは’false’です。
jquery.bxslider.min.jsの下に下記のスクリプトを記述します。
1 2 3 4 5 6 7 | <script> $(document).ready(function(){ $('.bxslider').bxSlider({ auto: true }); }); </script> |
pause
自動でスライドする時の間隔（停止時間）をミリ秒で指定する事ができます。
デフォルトは4000です。
jquery.bxslider.min.jsの下に下記のスクリプトを記述します。
1 2 3 4 5 6 7 8 | <script> $(document).ready(function(){ $('.bxslider').bxSlider({ auto: true, pause: 2000 }); }); </script> |
minSlides
カルーセルの際に表示するスライドの最低数を指定する事ができます。
デフォルトは0です。
jquery.bxslider.min.jsの下に下記のスクリプトを記述します。
1 2 3 4 5 6 7 8 9 | <script> $(document).ready(function(){ $('.bxslider').bxSlider({ slideWidth: 200, maxSlides: 3, minSlides: 3 }); }); </script> |
maxSlides
カルーセルの際に表示するスライドの最大数を指定する事ができます。
デフォルトは0です。
jquery.bxslider.min.jsの下に下記のスクリプトを記述します。
1 2 3 4 5 6 7 8 9 | <script> $(document).ready(function(){ $('.bxslider').bxSlider({ slideWidth: 200, maxSlides: 3, minSlides: 3 }); }); </script> |
slideWidth
カルーセルの際に表示するスライドの幅を指定する事ができます。
デフォルトは0です。
jquery.bxslider.min.jsの下に下記のスクリプトを記述します。
1 2 3 4 5 6 7 8 9 | <script> $(document).ready(function(){ $('.bxslider').bxSlider({ slideWidth: 200, maxSlides: 3, minSlides: 3 }); }); </script> |
moveSlides
カルーセルの際に表示するスライドさせる要素の数を指定する事ができます。
デフォルトは0です。
jquery.bxslider.min.jsの下に下記のスクリプトを記述します。
1 2 3 4 5 6 7 8 9 10 | <script> $(document).ready(function(){ $('.bxslider').bxSlider({ slideWidth: 200, maxSlides: 3, minSlides: 3, moveSlides: 2 }); }); </script> |
その他のオプションは下記のページをご覧下さい。
Options | Responsive jQuery Slider | bxSlider
プラグインを使わないスキルを身につけたい人のためのjQueryテクニカルノート
いかがでしたか。さすがにたくさんありますね！
以上でjQueryプラグイン「bxSlider」のいろいろなオプションの使い方のまとめ！でした。
