以前の記事で、サイト上に「bxSlider」のスライドショーを設置する簡単な方法について解説しました。
[blogcard url="https://fukafuka295.jp/homepage-slideshow-kantan/"]
bxSliderには、スライド方法を変更したりスピードを変更したりと、スライドショーを自由にカスタマイズできるオプションが多数用意されています。
そこで今回は、bxSliderのスライドショーに適用できるオプションの種類と記述方法について、紹介していこうと思います！
オプションの適用方法
bxSliderのスライドショーを設置した際、＜head＞＜head＞内に以下のようなコードを張り付けたと思います。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="js/jquery.bxslider.min.js"></script>
<link href="css/jquery.bxslider.css" rel="stylesheet" />
<script type="text/javascript">
$(document).ready(function(){
$('.bxslider').bxSlider({
auto: true,
});
});
</script>
オプションを追加するには、上記のコード内の
$('.bxslider').bxSlider({
：
});
の間にオプション行を追加していきます。
例：スライドショーのスピードを1000に設定したい場合（デフォルトでは500）
▼"auto: true,"の下に"speed:1000"を追加
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="js/jquery.bxslider.min.js"></script>
<link href="css/jquery.bxslider.css" rel="stylesheet" />
<script type="text/javascript">
$(document).ready(function(){
$('.bxslider').bxSlider({
auto: true,
speed: 1000
});
});
</script>
重要：
ここで注意したいのは、オプション行を追加するときは、最後のオプション行以外には最後にカンマ「,」を付けてください。でないとエラーが出る場合があるためです。
オプション一覧
bxSliderで使用できる主なオプションと、コードを以下に示します。基本的に"true"はイエスの意味で、"false"はノーの意味です。
・auto
スライドショーを自動で再生する。（デフォルトではfalse）
$(document).ready(function(){
$('.bxslider').bxSlider({
auto: true
});
});
・mode
画像のスライド方法の変更。horizontal（平行方向）vertical（垂直方向）fade（フェードアウト）の3つが選択できる。（デフォルトでは"horizontal"）
$(document).ready(function(){
$('.bxslider').bxSlider({
mode: 'vertical'
});
});
$(document).ready(function(){
$('.bxslider').bxSlider({
mode: 'fade'
});
});
・speed
画像のスライド速度をミリ秒単位で指定します。（デフォルトでは500ミリ秒）
$(document).ready(function(){
$('.bxslider').bxSlider({
speed: 2000
});
});
・slideMargin
画像と画像のマージン（間隔）の指定。（デフォルトでは0）
$(document).ready(function(){
$('.bxslider').bxSlider({
slideMargin: 10
});
});
・startSlide
スライドショーで表示する始めの画像を指定できる。1枚目は"0"、2枚目は"1"といった感じ。（デフォルトでは0）
$(document).ready(function(){
$('.bxslider').bxSlider({
startSlide: 1
});
});
・randomStart
"true"でスライドショーの始めの画像がランダムで表示される。（デフォルトではfalse）
$(document).ready(function(){
$('.bxslider').bxSlider({
randomStart: true
});
});
・infiniteLoop
"false"でスライドショーの画像の無限ループを解除する。（デフォルトではtrue）
$(document).ready(function(){
$('.bxslider').bxSlider({
infiniteLoop: false
});
});
・hideControlOnEnd
左右の送りボタンを表示している際、"true"で最初と最後のスライドの時に左右のボタンが消える。（デフォルトではfalse）
$(document).ready(function(){
$('.bxslider').bxSlider({
infiniteLoop: false,
hideControlOnEnd: true
});
});
・captions
スライドの各画像に説明文（caption）を表示させることができる。（デフォルトではfalse）
$(document).ready(function(){
$('.bxslider').bxSlider({
captions: true
});
});
▼画像にtitle行を追加することで説明文を表示させることができる。
<ul class="bxslider">
<li><img src="./images/sample1.jpg" title="画像の説明文"></li>
<li><img src="./images/sample2.jpg" title="画像の説明文"></li>
<li><img src="./images/sample3.jpg" title="画像の説明文"></li>
<li><img src="./images/sample4.jpg" title="画像の説明文"></li>
</ul>
・ticker
画像が絶え間なくスライドし続ける。（デフォルトではfalse）
$(document).ready(function(){
$('.bxslider').bxSlider({
ticker: true
});
});
・pager
スライド番号を表示するか否か。（デフォルトではtrue）
$(document).ready(function(){
$('.bxslider').bxSlider({
pager: false
});
});
・pagerType
スライド番号の表示方法の変更。"full"と"short"の2種類がある。（デフォルトではfull）
$(document).ready(function(){
$('.bxslider').bxSlider({
pagerType: 'short'
});
});
・controls
controlsボタン（●）を表示するか否か。（デフォルトではtrue）
$(document).ready(function(){
$('.bxslider').bxSlider({
controls: false
});
});
・autoControls
スライドショーを再生する"再生ボタン"と停止させる"一時停止ボタン"を表示する。（デフォルトではfalse）
$(document).ready(function(){
$('.bxslider').bxSlider({
auto: true,
autoControls: true
});
});
・pause
スライドが停止している間の時間をミリ秒で指定。（デフォルトでは4000）
$(document).ready(function(){
$('.bxslider').bxSlider({
auto: true,
pause: 2000
});
});
・minSlides, maxSlides
カルーセルで表示する際の、画像の最大数と最小数を設定する。（デフォルトでは0）
$(document).ready(function(){
$('.bxslider').bxSlider({
slideWidth: 200,
maxSlides: 3,
minSlides: 3
});
});
・touchEnabled
タッチでスライド操作をできるようにするか否か。（デフォルトではtrue）
$(document).ready(function(){
$('.bxslider').bxSlider({
touchEnabled: true
});
});
以上が、bxSliderで使用できる主なオプションとなります。その他のオプションに関しては、公式サイトから確認することができます。
