JavaScript・PHP・Vue.jsのサンプルやWordPressのテーマ・無料フォント、ブログの運営方法等の紹介

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

この記事を簡単に書くと…

  • ある時期からjQueryの「bxslider」でリンクができなくなった
  • 「touchEnabled:false」のオプションを追加することで解消
  • フリックでの切り替えができなくなるので、別のプラグインに変えることも検討を
ブログランキング・にほんブログ村へ

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

この記事をSNSでシェアする

関連記事

コメントする

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

Follow us on Twitter Subscribe RSS Follow us in feedly
NATURAL PRESS

このサイトについて

JavaScript・PHP・Vue.jsのサンプルや参考リンク、WEBサイト(ホームページ)で使えるアイコンや写真等の素材をダウンロード出来ます。

他にも、無料で使えるブロガーやアフィリエイター向けの、WordPressマガジンテーマ「NATURAL PRESS」を公開しています。ダウンロードや更新情報は、こちらのサイトで公開しています。

また、「WEB上手」は全ページリンクフリーですのでご自由にリンクしていただけます。リンクしていただけますと嬉しいです。

WordPress Theme NATURAL PRESS by WEB-JOZU.com