Written by Kasumi

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

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

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

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

touchEnabledを使う

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

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

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

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

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

slickに変更しよう

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

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

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

まとめ

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

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

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

目次

関連記事

jQuery WordPress

【簡単に代替】Contact Form 7 Datepickerが使えなくなった?jQuery UIを使って日付選択を実装しよう

更新日:2022.09.09
7270
jQuery

【グロナビ】複数あるプルダウンメニューで切り替えを実装する方法【jQuery】

更新日:2022.09.09
1561
jQuery

タブ切り替えでタブを上下に二つ設置し、連動させる方法

更新日:2022.09.09
4888
HTMLCSS jQuery

【CSS】高さ100vh指定時のスマホステータスバーを除く方法

更新日:2022.09.09
2516