WEB Tips デザイン・コーディング

bxSlider カスタマイズとオプション一覧

2014-01-02

本記事にはプロモーションが含まれています。

bxSlider カスタマイズとオプション一覧

ソラミ♪

Webエンジニアをやりつつ、デザインにも携わる株式会社コムワークの中の人。WordPress、Adobeアプリ、カワウソ好き。 2015年から当ブログ運営|2008年からGmail使用中|WordPress制作10年以上|15社以上のレンタルサーバー利用経験|100件以上のドメイン取得運用|サイト・ドメイン移転多数 »  もっとくわしく

bxSliderは、レスポンシンデザインに対応したカルーセルスライダーが作成できるライブラリです。

レスポンシブ対応なので様々な画面サイズに対応できて、ナビゲーションやページャーなどの多機能なコントロールを提供しており、カスタマイズ可能なオプションも豊富に用意されています。

スライドの速度やアニメーションの種類、自動再生などをカスタマイズできるオプションが多数あり、使いやすくて高機能なjQueryプラグインの一つです。

https://bxslider.com/

基本的な使い方

1. JavaScript、CSSを読み込む

CDNで読み込む場合は、jsdelivr、cdnjsで読み込むことができます。

bxsliderはjQueryプラグインなので、必ずjQueryを先に読み込みます

<!-- jQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>

<!-- bxsliderのJS -->
<script src="https://cdn.jsdelivr.net/npm/bxslider@4.2.14/dist/jquery.bxslider.min.js"></script>

<!-- bxslider css -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bxslider@4.2.14/dist/jquery.bxslider.min.css">

2.スライダーのHTML

スライドコンテナに.bxsliderというclassをつけて、スライドする要素をそれぞれ、<div></div>で囲みます。

スライドする要素はimgタグでもHTML要素でもOKです。

<div class="bxslider">
  <div>slide 1</div>
  <div>slide 2</div>
  <div>slide 3</div>
  <div>slide 4</div>
  <div>slide 5</div>
</div>

3. bxsliderのイニシャライズ

bxsliderを初期化します。好みのカスタマイズはここに記載していきます。

<script>
 $(function(){
    $('.bxslider').bxSlider();
 });
</script>

See the Pen bxslider by mixtaro (@mixtaro) on CodePen.

レスポンシブ対応のカルーセル

bxsliderのカルーセルをレスポンシブに対応させるには以下のオプション項目を設定する必要があります。

slideWidth
maxSlides
minSlides

slideWidth

スライドの最大幅を指定。これより大きくなることはありません。指定がない場合は100%になります。

maxSlides / minSlides

表示するスライドの最大数(maxSlides)と最小数(minSlides)を指定します。ビューポートで指定するのではなくスライド枚数で指定することになります。

slideWidthに2000など大きい値を設定した場合、minSlidesの値がデフォルトになります。

レスポンシブでなく固定幅にしたい場合

オプションのresponsive値をfalseにします。bxsliderはデフォルトの状態でレスポンシブになっています。

responsive: false

bxsliderの自動再生

カルーセルスライダーを自動再生したい場合は以下のオプションを追加します。

<script>
  $(function(){
    $('.bxslider').bxSlider({
    auto: true;
    });
  });
</script>

bxsliderの縦スクロール

<script>
  $(function(){
    $('.bxslider').bxSlider({
    mode: 'vertical';
    });
  });
</script>

bxsliderのフェードイン・アウト

See the Pen bxslider -fade by mixtaro (@mixtaro) on CodePen.

スライドが切り替わりをフェードエフェクトはmodeプロパティをfadeに指定します。上記の例では自動再生にして、矢印アイコンは表示しない設定にしました。

エフェクトのスピードも少し調整しています。CSSを使えばもう少しアニメーションのカスタマイズができそうです。

<script>
$(function(){
  $('.bxslider').bxSlider({
    mode: 'fade',
    auto: true,
    controls: false,
    speed:1000,
    pause:4000,
    });
  });
</script>

bxsliderで枠を消す方法

bxsliderでデフォルトの状態にはスライドに白い枠とドロップシャドウが設定されています。これを消したい時はCSSで消しちゃいましょう。

.bx-wrapper{

    /* 白い枠を消す */
    border: none;

    /* ドロップシャドウを消す */
    box-shadow: none;

}

bxsliderのサムネイル機能を使う方法

bxsliderでサムネイル付きのスライダーを設定する場合、方法は二つあります。

  • メインスライダーとサムネ用スライダーのHTMLを用意する
  • オプションにサムネを設定する

1. メインスライダーとサムネ用スライダーHTMLを用意する

See the Pen bxslider -thumbnail by mixtaro (@mixtaro) on CodePen.

メインのスライダーに以下のオプションを設定します。pagerCustomにサムネ用スライダーのクラスを指定します。

$(function(){
    $('.bxslider1').bxSlider({
      pagerCustom: '.bxslider2',
    });
});

2. bxsliderのオプションにサムネを設定する

二つ目はswitch文で条件分岐させる方法です。

See the Pen bxslider thumbnail2 by mixtaro (@mixtaro) on CodePen.

$('.bxslider').bxSlider({
  buildPager: function(slideIndex){
    switch(slideIndex){
      case 0:
        return '1';
      case 1:
        return '2';
      case 2:
        return '3';
      case 3:
        return '4';
      case 4:
        return '5';
    }
  }
});

どちらの場合もページャー用のスタイルシートは自分で設定する必要があります。

bxsliderのカスタマイズオプション

bxsliderで設定できるオプションはたくさん用意されていますのでここでは、よく使いそうな項目だけ抜粋しています。

基本的なプロパティ

プロパティ初期値説明
modehorizontalスライドタイプ「'horizontal', 'vertical', 'fade'」から選択
speed500スライドのスピード(ミリ秒:1/1000)
slideMargin0スライド間のマージン幅
startSlide0何番目の要素からスライドをスタートするか、0から数える
randomStartfalseスライドをランダムで表示するか
slideSelector スライド要素の指定
infiniteLooptrue真偽値(boolean)
アニメーションをループさせるかどうか
hideControlOnEndfalseNextを隠す
infiniteLoopf:false の時のみ使用
easing easingの種類
if using CSS: 'linear', 'ease', 'ease-in', 'ease-out', 'ease-in-out', 'cubic-bezier(n,n,n,n)'. If not using CSS: 'swing', 'linear' (see the above file for more options)
captionsfalse真偽値(boolean)
画像のtitle要素をcaptionとして表示するかどうか
tickerfalse真偽値(boolean)
スライドをニュースティッカーのように表示する場合
tickerHoverfalse真偽値(boolean)
マウスオーバーした時に一時停止するかどうか
adaptiveHeightfalse真偽値(boolean)
スライド要素の高さを動的にフィットさせるかどうか
adaptiveHeightSpeed500数値
adaptiveHeight:trueの時のみ transitionの時間
videofalse真偽値(boolean)
スライドに動画を含むかどうか trueの場合 plugins/jquery.fitvids.js必要?
responsivetrue真偽値(boolean)
スライド要素を自動リサイズするかどうか
useCSStrue真偽値(boolean)
水平、垂直スライドのアニメーションでcssトランジョンを使うかどうか
preloadImagesvisible'all', 'visible'
スライドに動画を含むかどうか
touchEnabledtrue真偽値(boolean)
スワイプトランジョンを許可するかどうか
swipeThreshold50スライド遷移を実行するために、タッチでスワイプしたときに必要なピクセル数。注:touchEnabled: trueの場合のみ使用される。
oneToOneTouchtruetrueの場合、スワイプした指にフェードしないスライドが追従
preventDefaultSwipeXtruetrueの場合、タッチスクリーンは指のスワイプに伴ってX軸方向に移動しない
preventDefaultSwipeYfalsetrueの場合、タッチスクリーンは指のスワイプに伴ってY軸方向に移動しない

peger機能

プロパティ初期値説明
pagertruepager (真ん中の○○○●)を表示するかどうか
pagerTypefull'full', 'short'
「full」の場合、各スライドに対してページャーが生成されます。 'short' の場合、「1 / 5」のようなページャーになります。
pagerShortSeparator/pagerTypeがshortの時、区切り文字として使う
pagerSelector ページャーを設定するために使用される要素。 デフォルトではページャーは bx-viewport に追加されます

コントロール機能

プロパティ初期値説明
controlstruePrev,Next矢印を表示するかどうか
nextTextNext次へボタンに使う文字列
prevTextPrev戻るボタンに使う文字列
autoControlsfalsetrueの場合、「Start/Stop」を表示

自動機能

プロパティ初期値説明
autofalseスライドアニメーションを自動再生するかどうか
pause4000次のアニメーションまでの間隔
autoStarttruefalseの場合はスタートボタンをクリックしてスタート
autoHoverfalseスライダーにマウスホバーした場合、一時停止するかどうか

カルーセル機能

プロパティ初期値説明
minSlides1スライド時に表示させる画像の最小数
maxSlides1スライド時に表示させる画像の最大数
moveSlides0遷移するときに移動する画像の枚数
slideWidth0スライド間のマージン
  • この記事を書いた人
  • 最新記事

ソラミ♪

Webエンジニアをやりつつ、デザインにも携わる株式会社コムワークの中の人。WordPress、Adobeアプリ、カワウソ好き。 2015年から当ブログ運営|2008年からGmail使用中|WordPress制作10年以上|15社以上のレンタルサーバー利用経験|100件以上のドメイン取得運用|サイト・ドメイン移転多数 »  もっとくわしく

-WEB Tips, デザイン・コーディング
-,