jQueryプラグイン「bxslider」でリンクが効かなくなるという現象に遭遇したので対処法を探してみました。
すでにいくつか対応されている記事を拝見しましたが、スマートフォンとタブレットではスワイプ機能は使えるように調整をしてみました。
原因
Chromeの仕様変更により、スライダーのスワイプやドラッグ操作でスライドを切り替える機能が原因のようです。
（確認の際は運よくリンク先に遷移したので最初は気付きませんでした...）
すぐできる対処法
bxsliderのオプションの中にある
bxsliderオプション
touchEnabled: false
を追記すると解消できました。
この「touchEnabled」オプションは、スワイプ（フリック）時にスライドを移動させるためのオプションです。
スマホとタブレットで見る時はtouchEnabledをtrueにする
先のtouchEnabledオプションをfalseのままだとスマホ・タブレットで見た時スワイプができなくなります。
スマートフォン・タブレットでスワイプできないと、ページャーやナビゲーションボタンをタップすることになります。
そうなると特にスマートフォンで見る時に、おそらく小さいボタンをタップすることになりますし、ユーザーにとってストレスになる可能性があります。
タッチデバイスではスワイプでスライドを移動できるように、@mitsuhiro_Kさんの対処法を元に少し変えて対処しました。
bxSliderがクリック出来なくなった時の応急処置
$(function(){
let bxSliderConfig = {
//使用しているサイトにあったオプション,
touchEnabled: false
};
let ua = navigator.userAgent;
let sp = ua.indexOf('iPhone') > -1 || (ua.indexOf('Android') > -1 && ua.indexOf('Mobile') > -1); // スマートフォン
let tab = ua.indexOf('iPad') > -1 ||(ua.indexOf('Macintosh') > -1 && 'ontouchend' in document) || ua.indexOf('Android') > -1; // タブレット
// スマートフォンまたはタブレットの場合にtouchEnabledをtrueにする
if (sp || tab) {
bxSliderConfig.touchEnabled = true;
}
let slide = $('#slider ul').bxSlider(bxSliderConfig);
});
他参考サイト
bxSlider をつかったスライダーのリンクが機能しないときの対処方法
bxSliderのスライド内のリンクが効かなくなった際の対処方