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

CSSの「object-fit」をIEブラウザでも適用させる方法【簡単】

更新日:2022.09.09
303
jQuery

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

更新日:2022.09.09
1441
jQuery

【簡単】別ページのアンカーリンクでもスムーズスクロールさせる方法

更新日:2022.09.09
4305
jQuery

複数設置に対応したタブ切り替えをjqueryで実装しよう

更新日:2022.09.09
1356