Home
CSS
bxSliderのデザインカスタムと不具合の対処

bxSliderのデザインカスタムと不具合の対処

bxSliderのデザインカスタムと不具合の対処

どうも!かけちまるです!

Webサイトで簡単にスライドを実装できるjQueryプラグインの「bxSlider」を解説していきます。

今となってはスライドを実装するとなると「bxSlider」よりも使いやすい「slick.js」が主流になってきていると思います。
しかし、何らかの理由で「slick.js」することでコードが干渉してしまい、うまく実装できないことがあったときに次の策として使えるので便利です。

この記事では、

  • ・bxSliderの基本的な使い方
  • ・色々なカスタマイズ
  • ・可視範囲に入ったら自動スライドを開始する方法
  • ・スライドに設置したリンクがクリックできない時の対処法
  • ・オプション一覧

を解説します。

bxSliderの準備

まず、「bxSlider」を使えるように準備をしましょう。
jQueryはダウンロードCDNでheadタグ内かbodyタグの最後あたりに読み込んでおいてください。

「bxSlider」もダウンロードCDNを読み込んでいきます。
「bxSlider」はCSSも用意してあるのでお好みで読み込んでください。
※CSSを読み込むとnext・previewボタンやカレントリンクの見た目が調整されます。

個人的には意図しないレイアウトになるのでCSSは読み込まず自分でスタイルを当てていきます。

今回はCDNで読み込んでいきます。

HTML
コピー
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bxSlider/4.2.15/jquery.bxSlider.min.js" integrity="sha512-p55Bpm5gf7tvTsmkwyszUe4oVMwxJMoff7Jq3J/oHaBk+tNQvDKNz9/gLxn9vyCjgd6SAoqLnL13fnuZzCYAUA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bxSlider/4.2.15/jquery.bxSlider.css" integrity="sha512-rV4fiystTwIvs71MLqeLbKbzosmgDS7VU5Xqk1IwFitAM+Aa9x/8Xil4CW+9DjOvVle2iqg4Ncagsbgu2MWxKQ==" crossorigin="anonymous" referrerpolicy="no-referrer"/> -->

CSSは読み込まないので非活性にしてあります。

bxSliderの基本的な使い方

まずは、オプションなど何も指定しないプレーンなデザインです。

実装サンプル画像>HTML> CSS>JavaScriptの順で解説していきます。

実装デモはこちら

実装サンプル

実装サンプルはこんな感じです。
「bxSlider」用のCSSは独自に用意しているのでこの後のCSSからコピペして参考にしてください。

実装サンプル画像

bxSliderの基本的な使い方

HTML

HTML
コピー
<div class="slider_container"> <div class="slider_wrap"> <img class="slider_img" src="./image/slider_img01.jpg"> </div> <div class="slider_wrap"> <img class="slider_img" src="./image/slider_img02.jpg"> </div> <div class="slider_wrap"> <img class="slider_img" src="./image/slider_img03.jpg"> </div> </div>

CSS

CSS
コピー
.slider_container{ width: 100%; } .slider_wrap{ width: 100%; } .slider_img{ display: block; object-fit: cover; width: 100%; height: auto; } /* bxSliderのスタイル */ .bx-wrapper{ position: relative; } .bx-wrapper .bx-controls-direction a{ outline: 0; text-indent: -9999px; width: 50px; height: 50px; position: absolute; top: 50%; transform: translateY(-50%); z-index: 9999; } .bx-wrapper .bx-next{ right: 5%; /* お好みの画像に変更してください */ background: url(./image/slider_arrow_right.svg) no-repeat; } .bx-wrapper .bx-prev { left: 5%; /* お好みの画像に変更してください */ background: url(./image/slider_arrow_left.svg) no-repeat; } .bx-wrapper .bx-pager{ display: flex; align-items: center; justify-content: space-between; width: 100px; position: absolute; bottom: 10%; left: 50%; transform: translateX(-50%); } .bx-wrapper .bx-pager.bx-default-pager a { background: #fff; border-radius: 1000px; display: block; opacity: 0.5; text-indent: -9999px; width: 15px; height: 15px; } .bx-wrapper .bx-pager.bx-default-pager a:hover, .bx-wrapper .bx-pager.bx-default-pager a.active, .bx-wrapper .bx-pager.bx-default-pager a:focus { opacity: 1; }

JavaScript

ここでは、コードをシンプルにしていますがオプションを追加するとスライドの自動再生や送り速度など色々調節できます。

JavaScript
コピー
$(window).on('load',function(){ $('.slider_container').bxSlider(); });

前後が見えるスライダー

実装デモはこちら

実装サンプル

実装サンプルはこんな感じです。
「bxSlider」用のCSSは独自に用意しているのでこの後のCSSからコピペして参考にしてください。

実装サンプル画像

前後が見えるスライダー

HTML

ポイント
  • ・通常のスライダーを実装する時よりもスライド画像を包容する要素を増やす必要があります。
HTML
コピー
<div class="slider_container"> <div class="slider_inner"> <div class="slider_wrap"> <img class="slider_img" src="./image/slider_img01.jpg"> </div> <div class="slider_wrap"> <img class="slider_img" src="./image/slider_img02.jpg"> </div> <div class="slider_wrap"> <img class="slider_img" src="./image/slider_img03.jpg"> </div> </div> </div>

CSS

ポイント
  • .bx-viewportoverflow: visible;を指定しましょう。
  • .slider_containermarginwidthを指定してメインに表示される画像の幅を調節しています。
CSS
コピー
.slider_container{ margin-left: auto; margin-right: auto; width: 90%; } .slider_wrap{ width: 100%; } .slider_img{ display: block; object-fit: cover; width: 100%; height: auto; } /* bxSliderのスタイル */ .bx-wrapper{ position: relative; } .bx-viewport{ overflow: visible !important; /* これを追加しないとうまくいかない */ } .bx-wrapper .bx-controls-direction a{ outline: 0; text-indent: -9999px; width: 50px; height: 50px; position: absolute; top: 50%; transform: translateY(-50%); z-index: 9999; } .bx-wrapper .bx-next{ right: 5%; /* お好みの画像に変更してください */ background: url(./image/slider_arrow_right.svg) no-repeat; } .bx-wrapper .bx-prev { left: 5%; /* お好みの画像に変更してください */ background: url(./image/slider_arrow_left.svg) no-repeat; } .bx-wrapper .bx-pager{ display: flex; align-items: center; justify-content: space-between; width: 100px; position: absolute; bottom: 10%; left: 50%; transform: translateX(-50%); } .bx-wrapper .bx-pager.bx-default-pager a { background: #fff; border-radius: 1000px; display: block; opacity: 0.5; text-indent: -9999px; width: 15px; height: 15px; } .bx-wrapper .bx-pager.bx-default-pager a:hover, .bx-wrapper .bx-pager.bx-default-pager a.active, .bx-wrapper .bx-pager.bx-default-pager a:focus { opacity: 1; }

JavaScript

ポイント
  • slideMarginオプションで各スライドの余白をとっています。
JavaScript
コピー
$(window).on('load',function(){ $('.slider_inner').bxSlider({ easing: 'ease', speed: 1000, pause: 6000, auto: true, slideMargin: 10, }); });

可視範囲に入ったら自動スライド開始

ユーザーに必ず1枚目からスライドを見せたいときに使えそうですね。

実装デモはこちら

スライドが可視範囲に入るまで自動スライドをOFFにしておいて、可視範囲に入ったら自動スライドをONにします。

仕組みとしては、

まず、autoオプションで自動スライドするように設定します。
次に、autoStartオプションでサイト読み込み時には自動スライドはOFFにしておきます。
そして、autoControlsオプションで自動スライドのStart・Stopボタンを設定し、ボタンは非表示にします。
あとは、JavaScriptでスライダーが可視範囲に入ったら自動スライドのStartボタンをクリックするように設定します。

これが可視範囲に入ってから自動スライドを開始する仕組みになります。

HTML

HTML
コピー
<div class="slider_container"> <div class="slider_wrap"> <img class="slider_img" src="./image/slider_img01.jpg"> </div> <div class="slider_wrap"> <img class="slider_img" src="./image/slider_img02.jpg"> </div> <div class="slider_wrap"> <img class="slider_img" src="./image/slider_img03.jpg"> </div> </div>

CSS

ポイント
  • .bx-controls-autodisplay: none;を設定しましょう。
CSS
コピー
.slider_container{ width: 100%; } .slider_wrap{ width: 100%; } .slider_img{ display: block; object-fit: cover; width: 100%; height: auto; } /* bxSliderのスタイル */ .bx-wrapper{ position: relative; } .bx-wrapper .bx-controls-direction a{ outline: 0; text-indent: -9999px; width: 50px; height: 50px; position: absolute; top: 50%; transform: translateY(-50%); z-index: 9999; } .bx-wrapper .bx-next{ right: 5%; /* お好みの画像に変更してください */ background: url(./image/slider_arrow_right.svg) no-repeat; } .bx-wrapper .bx-prev { left: 5%; /* お好みの画像に変更してください */ background: url(./image/slider_arrow_left.svg) no-repeat; } .bx-wrapper .bx-controls-auto{ display: none; /* スタートボタンを非表示にする */ } .bx-wrapper .bx-pager{ display: flex; align-items: center; justify-content: space-between; width: 100px; position: absolute; bottom: 10%; left: 50%; transform: translateX(-50%); } .bx-wrapper .bx-pager.bx-default-pager a { background: #fff; border-radius: 1000px; display: block; opacity: 0.5; text-indent: -9999px; width: 15px; height: 15px; } .bx-wrapper .bx-pager.bx-default-pager a:hover, .bx-wrapper .bx-pager.bx-default-pager a.active, .bx-wrapper .bx-pager.bx-default-pager a:focus { opacity: 1; }

JavaScript

ポイント
  • autoオプションで自動スライドするよう設定します。
  • autoStartオプションでサイト読み込み時には自動スライドはOFFにします。
  • autoControlsオプションで自動スライドのStart・Stopボタンを設定します。
  • ・可視範囲に入ったらautoControlsオプションで設定したStartボタンをクリックするように実装します。
JavaScript
コピー
$(window).on('load',function(){ $('.slider_container').bxSlider({ auto: true, autoStart: false, autoControls: true, }); }); $(window).on('scroll', function(){ let scrollTop = $(window).scrollTop(); let winH = $(window).height(); if($('.slider_container').offset().top - winH * 0.8 < scrollTop){ $('.bx-wrapper .bx-start').trigger('click'); } });

bxSliderの不具合対策

スライドに設置したリンクがクリックできない

対処法としては、「bxSlider」のバージョンが4.2.15以上のものを読み込むようにすると解消されるかと思います。

CDN : https://cdnjs.com/libraries/bxSlider

何らかの事情で旧バージョンの「bxSlider」を使いたい場合は、touchEnabledfalseに設定することで解消されます。

コピー
$('.slider_container').bxSlider({ touchEnabled: false, });

bxSliderのオプション一覧

公式サイトのオプションページ

 

基本設定的な設定

名前 デフォルト値 説明
mode
‘horizontal'(水平にスライド)
‘vertical'(下にスライド)
‘fade'(フェイド)
‘horizontal’ スライドの切り替わり方
speed
整数
500 スライドの移動する速度(ミリ秒)
slideMargin
整数
0 各スライド間のマージン
startSlide
整数
0 何番目のスライドからスタートするか
randomStart
ブール値
false スタート時のスライドをランダムにする
slideSelector
jQueryセレクター
スライドとして使用する要素を指定(例:.slider_wrap)。
注:デフォルトでは、スライダー要素のすべての直接の子を使用します。
infiniteLoop
ブール値
true 最後のスライド要素の次に1枚目に戻る
hideControlOnEnd
ブール値
false スライダーが端までスクロールしたらその方向の矢印を非表示にする。(infiniteLoopがfalseの時のみ使用可)
easing
‘linear’
‘ease’
‘ease-in’
‘ease-out’
‘ease-in-out’
‘cubic-bezier(n,n,n,n)’
null イージングの種類
CSSのtransitionを使用しないイージングを行いたい場合はjquery.easing.jsを別途読み込んだ上で、’swing’か’linear’
captions
ブール値
false スライド要素上に、title属性に入れた文章を表示する。
ticker
ブール値
false スライダーが一定のスピードで動き続ける
tickerHover
ブール値
false ティッカーモードの際に、マウスオーバーで動きを止めるようにする(CSSのtransitionを使用している時は使用できない)。
adaptiveHeight
ブール値
false スライダー内の各要素の高さが違うとき、スライドの高さを動的に変更します。
adaptiveHeightSpeed
整数
500 adaptiveHeightがtrueの場合の、スライダーの高さを変更させるイージングのスピード。
video
ブール値
false スライドにビデオが含まれている場合は、これをtrueに設定します。また、jquery.fitvids.jsを含めます。詳細については、http://fitvidsjs.com/を参照してください。
responsive
ブール値
true スライダーをレスポンシブ対応にする。
useCSS
ブール値
true スライドのアニメーションにCSStransitionを使用する。falseの場合は jQueryのanimate()を使用する。
preloadImages
‘all'(全部プリローロ)
‘visible'(一枚目だけ)
‘visible’ スタート前に、スライダー内の画像を全てプリロードしておくかどうかの設定
touchEnabled
ブール値
true スワイプ操作でのスライド切り替えを許可する
swipeThreshold
整数
50 touchEnabledがtrueの時のスワイプの量を設定
oneToOneTouch
ブール値
true スワイプすると画像が指を追従するようにする。
preventDefaultSwipeX
ブール値
true trueの場合、指をスワイプしてもタッチスクリーンはx軸に沿って移動しません。
preventDefaultSwipeY
ブール値
false trueの場合、指をスワイプしてもタッチスクリーンはy軸に沿って移動しません<。
wrapperClass ‘bx-wrapper’ スライダーをラップするクラス。デフォルトのbxSliderスタイルを使用しないように変更します。

ページャー関係の設定

名前 デフォルト値 説明
pager
ブール値
true ページャーを使用するかどうか。
‘full’
‘short’
‘full’ ページャーのタイプ。
‘full’だと(●●●)
‘short’だと(1/6)
pagerShortSeparator
文字
‘/’ pagerTypeを’short’にした場合の数字の区切り文字。
pagerSelector
jQueryセレクター
ページャーにデータを入力するために使用される要素。デフォルトでは、ポケットベルはbx-viewportに追加されます。
pagerCustom
jQueryセレクタ
null ページ送りを自分で用意する場合の設定。
buildPager
function(slideIndex){}
null 指定すると、すべてのスライド要素で関数が呼び出され、戻り値がポケットベルアイテムのマークアップとして使用されます。

コントローラー(next・prevボタン)関係の設定

名前 デフォルト値 説明
controls
ブール値
true スライダーのコントローラ現れます。
nextText
文字列
‘Next’ 「Next」ボタンに使用されるテキスト
prevText
文字列
‘Prev’ 「Prev」ボタンに使用されるテキスト
nextSelector
jQueryセレクタ
null 指定したセレクタを「Next」ボタンにする。
prevSelector
jQueryセレクタ
null 指定したセレクタを「Prev」ボタンにする。
autoControls
ブール値
false autoがtrueの時、「Start」「Stop」ボタンを追加する。
startText
文字列
‘Start’ autoとautoControlsがtrueの時、「Start」ボタンに使用されるテキスト(変更する場合autoControlsSelectorで配置するセレクタを指定)。
stopText
文字列
‘Stop’ autoとautoControlsがtrueの時、「Stop」ボタンに使用されるテキスト(変更する場合autoControlsSelectorで配置するセレクタを指定)。
autoControlsCombine
ブール値
false autoとautoControlsがtrueの時、再生中は停止ボタンが出て停止中は再生ボタンが出るようにする。
autoControlsSelector
jQueryセレクタ
null autoとautoControlsがtrueの時、「Start」「Stop」ボタンを自分で用意する。
KeyboardEnabled
ブール値
false 表示されているスライダーのキーボードナビゲーションを有効にする。

オートスクロール関係の設定

名前 デフォルト値 説明
auto
ブール値
false 自動でスクロールをするかどうか。
pause
整数
4000 自動でスクロールする間隔(ミリ秒)
autoStart
ブール値
true load時に自動スクロールを開始するかどうか
autoDirection
‘next'(右へ)
‘prev'(左へ)
‘next’ 自動スクロールする方向
autoHover
ブール値
false マウスオーバーした時に、自動スクロールを止める。
autoDelay
整数
0 load後、自動スクロールが開始されるまでの時間(ミリ秒)

カルーセルスライダーにする場合の設定

名前 デフォルト値 説明
minSlides
整数
1 一度に表示される各スライド要素の最小数
maxSlides
整数
1 一度に表示される各スライド要素の最大数
moveSlides
整数
0 一回のスライドでスライドされる要素の数
slideWidth
0
0 スライダー内各スライド要素の幅

コールバック

名前 引数 説明
onSliderLoad currentIndex:
現在のスライドの要素インデックス
スライダーが読み込まれた後に実行します。
onSliderResize currentIndex:
現在のスライドの要素インデックス
スライダーのサイズが変更された後に実行されます。
onSlideBefore $slideElement:
宛先要素のjQuery要素
oldIndex:
前のスライドの要素インデックス(遷移前)
newIndex:
宛先スライドの要素インデックス(遷移後)
スライドする直前に実行。
onSlideAfter $slideElement:
宛先要素のjQuery要素
oldIndex:
前のスライドの要素インデックス(遷移前)
newIndex:
宛先スライドの要素インデックス(遷移後)
スライドした直後に実行。
onSlideNext $slideElement:
宛先要素のjQuery要素
oldIndex:
前のスライドの要素インデックス(遷移前)
newIndex:
宛先スライドの要素インデックス(遷移後)
nextが実行される直前に実行。
onSlidePrev $slideElement:
宛先要素のjQuery要素
oldIndex:
前のスライドの要素インデックス(遷移前)
newIndex:
宛先スライドの要素インデックス(遷移後)
prevが実行される直前に実行。

コールバックはこんな感じで使います。

JavaScript
コピー
$('セレクター').bxSlider({ easing: 'ease', speed: 1000, pause: 6000, auto: true, onSliderLoad: function(){ // ここにスライダーが読み込まれた後の処理を書きます。 } });

パブリックメソッド

名前 説明
goToSlide 指定のインデックス番号の要素にジャンプさせる。
goToNextSlide 次のスライダーにスライド
goToPrevSlide 前のスライダーにスライド
startAuto 自動再生をスタート
stopAuto 自動再生をストップ
getCurrentSlide 現在アクティブなスライド要素のインデックス番号を取得
getSlideCount スライド要素の総数を取得
reloadSlider スライダーをリロードします。
destroySlider bxSliderを読み込んでいない状態に戻します。

パブリックメソッドはこんな感じで使用します。

JavaScript
コピー
let slider = $('セレクター').bxSlider(); slider.goToSlide(3);

まとめ

いかがでしたでしょうか。
スライダーを実装するとなると「slick.js」を使うことが多いと思いますが「bxSlider」もカスタマイズ性があり十分使えそうですね。
bxSliderのカスタマイズについては後々追加していけたらと思います。

おわり

かけちまる
かけちまる
Webエンジニアをしています。
HTML/CSS/JavaScript/jQuery/PHPができます。
WEB制作を中心に日々学びになったこと、興味が沸いたことについて初心者の方でもわかりやすいようにアウトプットしていくブログです。

関連記事

WordPressでショートコードを自作する方法

WordPressでショートコードを自作する方法

【WordPress】カテゴリーの記事数を取得する方法

【WordPress】カテゴリーの記事数を取得する方法

【jQuery】順番に要素が出てくるアニメーション

【jQuery】順番に要素が出てくるアニメーション

Three.jsテクスチャをGLSLでbacground-size: cover;のようにする

Three.jsテクスチャをGLSLでbacground-size: cover;のようにする

【GSAP入門】使い方となにができるのか

【GSAP入門】使い方となにができるのか

【レスポンシブ対応】Facebook・Twitterのタイムライン埋め込み方法

【レスポンシブ対応】Facebook・Twitterのタイムライン埋め込み方法