bxsliderでスライダー内画像のaタグリンクが効かない時の対処方法【結論slickを使おう】
bxsliderを使っていて、スライダー内の画像のリンクが突然効かなくなった。。
リンクが機能する様に変更したい。
本記事では、このような悩みを解決します。
touchEnabledを使う
$('.bxslider').bxSlider({
touchEnabled: false,
});
リンクが効かないbxsliderスライダーはchromeブラウザで確認されてますか？
突然リンクが効かなくなった理由はchromeを含むWebKit系ブラウザのバージョンアップにより仕様変更が行われて、それがbxsliderのリンク機能に影響を及ぼしてるそうです。
bxslider実行関数内でtouchEnabled: false;を使う事でリンクが使えるようになります。
ただし上記オプションを入れると、フリック動作ができなくなります。
slickに変更しよう
上記記事にslickの導入方法が書いてます。
slickを使えば、フリック動作を維持したままリンク機能もしっかり動作します。
ぜひ試して見てください。
まとめ
bxsliderに限らず、ブラウザのバージョンアップで一部機能が使えなくなるプラグインはあると思うので注意が必要です。
bxsliderもサイトのスライダー実装に使いやすいプラグインなので、早くフリック動作込みでリンクが機能するバージョンを出して欲しいですね。
以上で解説を終わります。
目次
