RSSを購読する
follow us in feedly
ふかふか交易所 | ネットの情報をわかりやすくお届け!
RSSを購読する
follow us in feedly

ニュータウンシリーズ まとめ

マインクラフト関連記事 まとめ

VR関連記事 まとめ

トップ ゲーム 動画 ホームページ 掲示板 お問い合わせ サイトマップ ページ下部へ

ホームページカテゴリ 新着記事

サイト内検索

過去7日間の人気記事

  • 総合
  • ゲーム
  • 動画
  • ホームページ

ホーム > ホームページカテゴリー No.51 ~ No.60 > 記事No.54

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

← 前の記事

次の記事 →

bxSlider_option

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

関連:ホームページにサムネイル付きスライドショーを簡単に設置する方法(jQuery)

bxSliderには、スライド方法を変更したりスピードを変更したりと、スライドショーを自由にカスタマイズできるオプションが多数用意されています。

そこで今回は、bxSliderのスライドショーに適用できるオプションの種類と記述方法について、紹介していこうと思います!

オプションの適用方法

bxSliderのスライドショーを設置した際、<head><head>内に以下のようなコードを張り付けたと思います。


オプションを追加するには、上記のコード内の

$('.bxslider').bxSlider({

});

の間にオプション行を追加していきます。


例:スライドショーのスピードを1000に設定したい場合(デフォルトでは500)

▼"auto: true,"の下に"speed:1000"を追加


重要:

ここで注意したいのは、オプション行を追加するときは、最後のオプション行以外には最後にカンマ「,」を付けてください。でないとエラーが出る場合があるためです。


オプション一覧

bxSliderで使用できる主なオプションと、コードを以下に示します。基本的に"true"はイエスの意味で、"false"はノーの意味です。


・auto

スライドショーを自動で再生する。(デフォルトではfalse)


・mode

画像のスライド方法の変更。horizontal(平行方向)vertical(垂直方向)fade(フェードアウト)の3つが選択できる。(デフォルトでは"horizontal")


・speed

画像のスライド速度をミリ秒単位で指定します。(デフォルトでは500ミリ秒)


・slideMargin

画像と画像のマージン(間隔)の指定。(デフォルトでは0)


・startSlide

スライドショーで表示する始めの画像を指定できる。1枚目は"0"、2枚目は"1"といった感じ。(デフォルトでは0)


・randomStart

"true"でスライドショーの始めの画像がランダムで表示される。(デフォルトではfalse)


・infiniteLoop

"false"でスライドショーの画像の無限ループを解除する。(デフォルトではtrue)

hideControlOnEnd

・hideControlOnEnd

左右の送りボタンを表示している際、"true"で最初と最後のスライドの時に左右のボタンが消える。(デフォルトではfalse)


・captions

スライドの各画像に説明文(caption)を表示させることができる。(デフォルトではfalse)

▼画像にtitle行を追加することで説明文を表示させることができる。


・ticker

画像が絶え間なくスライドし続ける。(デフォルトではfalse)


・pager

スライド番号を表示するか否か。(デフォルトではtrue)


・pagerType

スライド番号の表示方法の変更。"full"と"short"の2種類がある。(デフォルトではfull)


・controls

controlsボタン(●)を表示するか否か。(デフォルトではtrue)


・autoControls

スライドショーを再生する"再生ボタン"と停止させる"一時停止ボタン"を表示する。(デフォルトではfalse)


・pause

スライドが停止している間の時間をミリ秒で指定。(デフォルトでは4000)


・minSlides, maxSlides

カルーセルで表示する際の、画像の最大数と最小数を設定する。(デフォルトでは0)


・touchEnabled

タッチでスライド操作をできるようにするか否か。(デフォルトではtrue)


以上が、bxSliderで使用できる主なオプションとなります。その他のオプションに関しては、公式サイトから確認することができます。

オプションの適用に関してご質問のある方は、コメント欄よりどうぞ!


参考:オプションで自分好みにカスタマイズ!bxsliderの使い方

関連記事はこちら

この記事に対するコメント

Comment Form is loading comments...

過去7日間の人気記事

マインクラフト関連記事 まとめ

VR関連記事 まとめ

Aviutl(動画編集)関連記事まとめ

AR関連記事 まとめ

ご意見・ご質問等は 掲示板へ!

コメントを公開されたくない場合は メッセージフォームへ!


当サイトについて  月極広告の募集

©Copyright fukafuka295.jp 2016 All rights reserved.

トップ ゲーム 動画 ホームページ 掲示板 お問い合わせ サイトマップ ページ上部へ