ネットコンテンツ全般から日々のお役立ち情報まで分かりやすくお届け | ふかふか交易所

ふかふか交易所

HP・ブログ関連

[bxSlider]スライドショーオプションの記述方法と使い方まとめ

更新日:

以前の記事で、サイト上に「bxSlider」のスライドショーを設置する簡単な方法について解説しました。

超簡単!ホームページにスライドショー機能を実装する方法(JQuery)

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で使用できる主なオプションとなります。その他のオプションに関しては、公式サイトから確認することができます。

-HP・ブログ関連
-, , , , , , , , ,

Copyright© ふかふか交易所 , 2019 All Rights Reserved.