仙台・宮城の皆さんおばんです！今夜はbxSliderのリンクが反応しない時の解決方法です！
「bxSlider」はすごく簡単にスライドショーを作成することができます。有名なjQueryのプラグインなのでご存じの方も多いと思います。
このページに辿りついた人は以下のようなhtmlになっていると思います。
<ul class="bxslider">
<li><img src="img/img01.jpg"></li>
<li><a href="/service"><img src="img/img02.jpg"></a></li>
<li><img src="img/img03.jpg"></li>
</ul>
いろいろ検証すると、どうやらデスクトップのChromeだけ、このaにタグが全く反応しないことが解りました。
解決方法
反応しなくなってしまったら、応急処置としてとりあえず以下のようにjavascript部分に1行加えてください。
$(function(){
$('.bxslider').bxSlider({
auto: true,
slideWidth: 640,
minSlides: 3,
touchEnabled: false //変更点
});
});
touchEnabledは初期値ではtrueになっていますが、これをfalseに変更します。これで反応するようになると思います。
ヒント！
touchEnabledは左右のスワイプでの画像切替について設定するためのオプションです。PCの場合はドラッグになります。
これでも反応しなかったら…
最新版をダウンロード
bxSliderの公式サイトから最新バージョンをダウンロードして差し替えることで解決する場合が多いです。
slickに切り替えちゃう
同じjQueryのスライダー系のプラグインに「slick」というものがあります。現在はbxSliderよりもポピュラー存在になっている気がします。この機会にslickに切り替えるというのも手です。
まとめ
いかがでしたか？今回はChromeのバージョンアップで突然動かなくなったのではないかと推測しています。もし以前に作ったサイトでbxSliderを実装しているサイトがあるならChromeでも正常に動くか試してみてください。リンクが動かないことによって大きな機会損失に繋がっているかもしれません！
それではまた！仙台・宮城でのホームページ制作やサイトリニューアルならダテナまで！もちろん宮城県外の方も大歓迎です！
