bxsliderでスライダー内画像のaタグリンクが効かない時の対処方法【結論slickを使おう】

bxsliderを使っていて、スライダー内の画像のリンクが突然効かなくなった。。

リンクが機能する様に変更したい。

本記事では、このような悩みを解決します。

touchEnabledを使う

	 $('.bxslider').bxSlider({
    touchEnabled: false,
	});

リンクが効かないbxsliderスライダーはchromeブラウザで確認されてますか?

突然リンクが効かなくなった理由はchromeを含むWebKit系ブラウザのバージョンアップにより仕様変更が行われて、それがbxsliderのリンク機能に影響を及ぼしてるそうです。

bxslider実行関数内でtouchEnabled: false;を使う事でリンクが使えるようになります。

ただし上記オプションを入れると、フリック動作ができなくなります。

slickに変更しよう

上記記事にslickの導入方法が書いてます。

slickを使えば、フリック動作を維持したままリンク機能もしっかり動作します。

ぜひ試して見てください。

まとめ

bxsliderに限らず、ブラウザのバージョンアップで一部機能が使えなくなるプラグインはあると思うので注意が必要です。

bxsliderもサイトのスライダー実装に使いやすいプラグインなので、早くフリック動作込みでリンクが機能するバージョンを出して欲しいですね。

以上で解説を終わります。

Ads

関連記事

HTMLCSS プログラミング

CSSで画像の高さを一律にそろえる方法【結論:object-fitを使えば簡単です】

更新日:2021.01.08
895
WordPress プログラミング

【簡単】wordpressのショートコードを使って、投稿記事内にphpファイルを呼び出す方法

2022.02.04
36
JavaScript プログラミング

【簡単】slickスライダーでサムネイルを連動・固定2列2段以上で表示させる方法

2022.01.27
920
HTMLCSS プログラミング

CSSを使って役物文字の間を詰める方法【font-feature-settingsを使おう】

2021.03.26
183