bxSliderの使い方

bxSliderの使用方法をご紹介しています。
bxSliderはレスポンシブに対応したカルーセルを簡単に実装できるjQueryライブラリです。
bxSliderは画像だけでなく文字であっても機能します。

公式サイト
Github

  • ※ このライブラリは、jQueryが別途必要です。
目次
  1. ライブラリのダウンロードと設置
  2. 適用方法
  3. オプション
  4. コールバック
  5. メソッド
  6. サンプルデモ
  7. スマートフォンでリンクが機能しない（遷移できない）不具合の解消方法

ライブラリのダウンロードと設置

Githubから"Source code (zip) "を押し、ダウンロードして解凍します。
解凍後、distディレクトリにあるjquery.bxslider.min.cssとjquery.bxslider.min.js、imagesディレクトリを任意の場所に格納します。

次のように任意の場所に格納したCSSファイルとJavaScriptファイルを<head>内に記述して読み込みます。
パスは環境により変更してください。

HTML

  • ※ jQueryは予め読み込んでいるものとします。

適用方法

次のようにカルーセルを適用するHTMLを準備します。

HTML

JavaScriptを次のように記述します。

JavaScript

JavaScript

これでカルーセルが機能します。
初期状態では適用する要素の子要素すべてをスライドとして扱います。
詳しくは オプション を参照してください。

オプション

General

プロパティ 初期値 設定可能値・型 説明
mode 'horizontal' 'horizontal',
'vertical',
'fade'		 切り替え効果の種類
horizontal = 水平方向
vertical = 垂直方向
fade = フェード
speed 500 number 切り替え効果の速度
指定値はミリ秒
slideMargin 0 number スライドの間隔（余白）
指定値はピクセル
startSlide 0 number 開始するスライド
指定値は0から始まるインデックス番号
randomStart false boolean ランダムにスライドを切り替えるかどうか
slideSelector '' jQuery selector スライドする要素
初期値（空白）は直下の要素すべてをスライドとする
infiniteLoop true boolean 無限に繰り返すかどうか
true = 最後のスライドから最初のスライドへ切り替えたり、最初のスライドから最後のスライドへ切り替えることが可能
false = 最後のスライドから最初のスライド、最初のスライドから最後のスライドへ切り替えられなくなる
hideControlOnEnd false boolean アクティブにする次のスライドがない場合、コントローラを非表示にするかどうか
infiniteLoopがfalseの場合のみ有効
対象のコントローラにクラス名「disabled」が付与される
easing null jquery.easing 切り替え効果のイージング
指定値はjQueryのeasingまたはCSSの「transition-timing-function」の値
captions false boolean キャプションを表示するかどうか
表示する文字はtitle属性で設定する
ticker false boolean 切り替え効果をニュースティッカーのように扱うかどうか
tickerHover false boolean スライドへマウスオーバーしたとき、ティッカーを一時停止するかどうか
tickerがtrueの場合のみ有効
adaptiveHeight false boolean スライドの高さが異なる場合に、スライド全体の大きさをアクティブになっているスライドの大きさにリサイズするかどうか
adaptiveHeightSpeed 500 number リサイズする速度
adaptiveHeightがtrueの場合のみ有効
video false boolean スライドに動画が含まれる場合、動画をレスポンシブに対応させるかどうか
別途jquery.fitvids.jsが必要
https://github.com/davatron5000/FitVids.js
responsive true boolean レスポンシブに対応するかどうか
useCSS true boolean スライドの切り替え効果にCSSアニメーションを使用するかどうか
preloadImages 'visible' 'all',
'visible'		 プリロードする画像（画像の読み込みのタイミング）
all = すべての画像
visible = 表示されている（見えている）画像のみ
touchEnabled true boolean タッチデバイスのスワイプによる切り替えをするかどうか
swipeThreshold 50 number スワイプで切り替えを行う感覚幅
oneToOneTouch true boolean タッチしている間に指に吸着してスライドを動かすかどうか
preventDefaultSwipeX true boolean X軸に対するスワイプのスライドを行うかどうか
preventDefaultSwipeY false boolean Y軸に対するスワイプのスライドを行うかどうか
wrapperClass 'bx-wrapper' string 適用する親要素にラッパーする要素のクラス名

Pager

プロパティ 初期値 設定可能値 説明
pager true boolean ページャーを表示するかどうか
スライドの切り替える数をページとしてアイテムを表示する
pagerType 'full' 'full',
'short'		 ページャーの種類
full = スライドの分だけ表示（1 2 3 ...）
short = 現在の表示しているスライドの番号と合計のスライド数のみ表示（2 / 3）
※ fullの時はスライドの移動機能が付く
pagerShortSeparator ' / ' string pagerTypeが'short'の時の区切り文字
pagerSelector '' jQuery selector 指定した要素にページャーを表示する
指定可能な値はセレクターまたはjQueryオブジェクト
pagerCustom null jQuery selector ページャーを独自の要素（テンプレート）にする
指定可能な値はセレクターまたはjQueryオブジェクト
buildPager null function サムネールとしてのページャーを指定する

Controls

プロパティ 初期値 設定可能値 説明
controls true boolean コントローラー（次や前のスライドへ移動するボタン）を表示するかどうか
nextText 'Next' string 次のスライドへ移動するボタンの文字
prevText 'Prev' string 前のスライドへ移動するボタンの文字
nextSelector null jQuery selector 次のスライドへ移動するボタンを独自の要素にする
指定可能な値はセレクターまたはjQueryオブジェクト
prevSelector null jQuery selector 前のスライドへ移動するボタンを独自の要素にする
指定可能な値はセレクターまたはjQueryオブジェクト
autoControls false boolean 自動切り替えを行うボタン（コントローラ）を表示するかどうか
startText 'Start' string 自動切り替えの開始ボタンの文字
stopText 'Stop' string 自動切り替えの一時停止ボタンの文字
autoControlsCombine false boolean 自動切り替えの開始・一時停止をトグルボタンとして表示するかどうか
autoControlsSelector null jQuery selector 自動切り替えのコントローラを独自の要素にする
指定可能な値はセレクタ―またはjQueryオブジェクト
keyboardEnabled false boolean キーボードによる操作を可能にするかどうか

Auto

プロパティ 初期値 設定可能値 説明
auto false boolean 自動的に切り替えを行うかどうか
stopAutoOnClick false boolean クリックしたときに自動切り替えのタイミングをやり直すかどうか
通常次のスライドまでの時間はページャーやコントローラを操作しても進むが、このオプションを有効にするとリセットすることができる
pause 4000 number 次のスライドを切り替えを開始するまでの間隔
autoStart true boolean ページ読み込み後に自動的に切り替えを開始するかどうか
autoDirection 'next' 'next',
'prev'		 自動切り替えする方向
next = 次の方向へ移動
prev = 前の方向へ移動
autoHover false boolean スライドへマウスオーバーしたとき、自動切り替えを一時停止するかどうか
autoDelay 0 number 初期に自動切り替えするときの遅延時間
指定値はミリ秒

Carousel

プロパティ 初期値 設定可能値 説明
minSlides 1 number 一度（表示領域）に表示させるスライドの最小個数
maxSlides 1 number 一度（表示領域）に表示させるスライドの最大個数
moveSlides 0 number 一度に移動する（切り替わる）スライド数
0を指定するとminSlidesやmaxSlidesの数に応じて自動的に設定される
slideWidth 0 number 1つのスライドに対する横幅
0を指定すると自動的に幅が設定される
shrinkItems false boolean

Keyboard

プロパティ 初期値 設定可能値 説明
keyboardEnabled false boolean キーボードによるスライドの操作を有効にするかどうか

Accessibility

プロパティ 初期値 設定可能値 説明
ariaLive true boolean aria-live属性を有効にするかどうか
ariaHidden true boolean aria-hidden属性を有効にするかどうか

コールバック

プロパティ 引数 説明
onSliderLoad
第一引数：currentIndex
現在のスライドのインデックス番号
 bxSliderの準備が整った直後に実行する関数
onSliderResize
第一引数：currentIndex
現在のスライドのインデックス番号
 スライドがリサイズされたときに実行する関数
onSlideBefore
第一引数：$slideElement
次のスライドの要素（jQueryオブジェクト）
第二引数：oldIndex
切り替え前のスライドのインデックス番号
第三引数：newIndex
切り替え後のスライドのインデックス番号
 スライドの切り替えが行われる直前に実行する関数
onSlideAfter
第一引数：$slideElement
次のスライドの要素（jQueryオブジェクト）
第二引数：oldIndex
切り替え前のスライドのインデックス番号
第三引数：newIndex
切り替え後のスライドのインデックス番号
 スライドの切り替えが行われた直後に実行する関数
onSlideNext
第一引数：$slideElement
次のスライドの要素（jQueryオブジェクト）
第二引数：oldIndex
切り替え前のスライドのインデックス番号
第三引数：newIndex
切り替え後のスライドのインデックス番号
 次のスライドに切り替わる直前に実行する関数
onSlidePrev
第一引数：$slideElement
次のスライドの要素（jQueryオブジェクト）
第二引数：oldIndex
切り替え前のスライドのインデックス番号
第三引数：newIndex
切り替え後のスライドのインデックス番号
 前のスライドに切り替わる直前に実行する関数

JavaScript

メソッド

メソッド名 説明
goToSlide 指定したスライドへ切り替える
goToNextSlide 次のスライドへ切り替える
goToPrevSlide 前のスライドへ切り替える
startAuto 自動切り替えを開始
stopAuto 自動切り替えを一時停止
getCurrentSlide 現在のスライドのインデックス番号を取得
getSlideCount スライドの合計個数を取得
redrawSlider 描画をやり直す
スライドの幅や高さなどうまく取得できない時などに使用する
reloadSlider bxSliderをリロード（読み直し）を行う
destroySlider bxSliderの破棄を行う

JavaScript

サンプルデモ

初期

JavaScript

効果をフェード、キャプションを有効

JavaScript

自動切り替え、自動切り替えコントローラ表示を有効

JavaScript

表示領域（最小と最大）、スライドの幅、スライドの間隔を指定

JavaScript

minSlidesとmaxSlidesの値は親要素の幅に依存します。
minSlidesを1、maxSlidesを3とした場合、親要素の幅が500pxの場合は3枚表示されますが、親要素が500px未満である場合は2枚または1枚表示されることになります。
minSlidesとmaxSlidesが同じ値かつslideWidthが0以外を指定している場合は、slideWidthの値は最大の幅とし、枚数と間隔の合計幅が親要素を超える場合は1つのスライドの幅が自動的に調整され、必ずその枚数で表示されます。

ニュースティッカーのように表現

JavaScript

speedによってスライド全体の速度を指定します。

ページャーをサムネール画像として表示

JavaScript

左右を見切れさせる

左右のスライドをちょい見せするテクニックです。
スライドを適用する要素にさらに親要素が必要です。

HTML

JavaScript

CSS