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

2022.01.15

2022.04.02

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

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-viewportにoverflow: visible;を指定しましょう。
・.slider_containerにmarginとwidthを指定してメインに表示される画像の幅を調節しています。

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-autoにdisplay: 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」を使いたい場合は、touchEnabledをfalseに設定することで解消されます。

コピー
$('.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のカスタマイズについては後々追加していけたらと思います。

おわり

フィードバックを送信

記事についてのフィードバックはTwitterかお問い合わせフォームから受け付けております。

かけちまる

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

かけちまるblog

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

bxSliderの準備

bxSliderの基本的な使い方

実装サンプル

HTML

CSS

JavaScript

前後が見えるスライダー

実装サンプル

HTML

CSS

JavaScript

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

HTML

CSS

JavaScript

bxSliderの不具合対策

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

bxSliderのオプション一覧

基本設定的な設定

ページャー関係の設定

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

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

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

コールバック

パブリックメソッド

まとめ

関連記事

【縦横比を保つ】YouTube埋め込みをレスポンシブ対応にする

【コーディング効率化】VSCodeにコードスニペットを登録しよう

pictureタグで画像を出し分けてWebP非対応ブラウザ対策をする方法

UNPKGの使い方~npmで公開済のパッケージを使えるCDNサービス~

Ajaxを使用したheaderとfooterの共通化【JavaScript】

【PHP】foreachで配列の最初と最後を判定する