jQueryスライダー『bxSlider』のリンクが動作しない場合の対処方法

画像やコンテンツを左右に切り替える、『スライダー slider』＝『カルーセル carousel』機能。

昨今、比較的ポピュラーな『slick』が登場する前に構築されたwebサイトではjQueryプラグイン『bxSlider』が多く導入されていたように観測しています。様々なWordPressテーマや、統合型CMSなどにも導入されている事もあり、今なお稼働しているwebサイトも多いのではないでしょうか。筆者も良く利用していましたが、スライダー領域を中央によせたい時などの実装がやや複雑だった記憶があります。

そんなbxSliderを導入し、公開されているいくつかのwebサイトで『スライダー画像からリンクしたページへ推移できない』という事象が発生し、修正対応を行ったので、その方法を記載しておきます。

bxSliderからのリンクが動作しない原因

どうやらデスクトップ環境のChrome関連ブラウザでのみ発生するという状況だった為、原因の特定に難儀しましたが、素早くクリックを繰り返すと推移する事もあったので、プログラムの挙動自体の問題を疑いました。

いろいろ検索と検証をした結論としては、bxSliderでデフォルト設定となっている『touchEnabled』に関連するプログラム処理が上手く動作していないようでした。

最善の対応方法：bxSliderを最新バージョンにする

2019年7月現在の最新バージョンbxSlider v4.2.1ｄ（14） では、この事象が改善されているようですので、公式サイトやgithubからダウンロードし、差し替える事で解決します。

かなり古いバージョンの bxSlider を使用している場合などは、動作チェックが必用かもしれません。そんな時は次以降の対応方法で急ぎ修正するのも良いでしょう。

取り急ぎの対応方法 ：『touchEnabled』を無効に

これは、モバイル＆デスクトップ問わず、スライダーを左右のスワイプ（デスクトップでは左右ドラッグ）で切り替えるオプションで、同オプションは特に設定をしなくても初期値が touchEnabled: true として動作します。

具体的には、bxsliderを実行するための記述として……

<script type="text/javascript">
$(document).ready(function(){
	$('.bxslider').bxSlider({
		auto: true,
		touchEnabled: true //設定していなくても初期値がtrue
	});
});
</script>

となっているので、これを無効する事で問題は解決します。

<script type="text/javascript">
$(document).ready(function(){
	$('.bxslider').bxSlider({
		auto: true,
		touchEnabled: false //無効に
	});
});
</script>

取り急ぎの対応方法2 ： デスクトップ環境だけ、『touchEnabled』を無効に

デスクトップ環境であれば、左右送りのボタンなどがあれば、それほど影響はありませんが、モバイル環境だとスワイプで切り替わった方が良いという判断やご要望もあるでしょう。

そんな場合は更にユーザーエージェントで判別してデスクトップ環境のドラッグ＆ドロップでは切り替わらないけど、モバイル環境では左右スワイプで切り替わる……という形で対応するというのが楽ですね。

<script type="text/javascript">
$(document).ready(function(){

if(navigator.userAgent.match(/(iPhone|iPod|Android.*Mobile)/i)) { //モバイルデバイスの処理
	$('.bxslider').bxSlider({
		auto: true,
		touchEnabled: true //設定していなくても初期値がtrueなので省略可
	});
} else {　//モバイルデバイスでは無い場合の処理
	$('.bxslider').bxSlider({
		auto: true,
		touchEnabled: false //無効に
	});
}
});
</script>

根本的な解決ではないので、かけられる工数や労力に余裕があれば、slickや他のプログラムに乗せ換えるというのも良いかと。

bxSliderのダウンロードや公式情報はこちら

slickについては、当サイトの下記記事で詳細解説をしていますので、興味が有ればあわせてご覧ください。https://uzurea.net/explanation-of-jquery-slider-slick/