bxsliderがクリックできない時の対処法

jQueryの「bxslider」は、WEBサイトで写真をスライドして表示させることができる、有名なプラグインの一つです。レスポンシブ対応もしているので、使っているユーザーも多いのではないでしょうか。

その「bxslider」で、スライドの写真にリンクを貼っている場合に、ある時期からクリックできなくなってしまいました。原因としては、Google Chromeのアップデートによって「bxslider」に不具合が発生している状態なのですが、まだ対応されていません。

その為、「bxslider」が最新版になって、この不具合に対応するまでは、リンクをクリックできるように対策をしておく必要があります。

「bxslider」にオプションを追加する

今回のリンクがクリックできない不具合は、写真をドラッグ（スマホではフリック）して切り替える為の部分でうまくいっていないのが原因のようです。そこで、写真をドラッグして繰り替えることが出来なくなってしまいますが、以下のオプションを指定することで、リンクをクリックできない不具合は解消されます。

touchEnabled:false

こちらのオプションは、写真をドラッグ（フリック）して切り替えることが出来るかどうかを指定するオプションです。デフォルトでは「true」なので、写真をドラッグして切り替えることができるようになっています。これを「false」にして、ドラッグ（フリック）での切り替えを無効にすることで、リンクがクリックできない不具合は解消されます。

具体的な記述としては、以下のような感じになります。
（オプションの指定はサイト毎に変わります）

$(‘.bxslider’).bxSlider({
mode: ‘fade’,
captions: true,
touchEnabled:false,
slideWidth: 600
});

まとめ

これで、bxsliderがクリックできない時の対処は完了です。
ただ、この状態だと、写真をドラッグで切り替えることができないばかりか、スマホで写真をフリックして切り替えることが出来ないので、少々不便です。スマホでは、特にフリックして写真を切り替えることが当たり前ですので、この操作ができないと、かなりの違和感があります。

bxsliderの最新版で、リンクがクリックできない不具合が早く解消されると良いですね。あまりにも不具合が解消されないようであれば、別のプラグインを使うことを検討する必要がありそうです。

関連記事