2019年07月17日
bxSlider をつかったスライダーのリンクが機能しないときの対処方法
先日お客様より「スライダーのがリンクしなくなっています。お調べいただけますでしょうか。」というご依頼がありました。すでに記事になっているサイトなどもありますが、弊社で行った作業も書いておきたいと思います。
そもそも、これは Google Chrome や Safari など、WebKit 系統の Web ブラウザの2019年3月ごろの更新で仕様変更があり、スライダーに利用している JavaScript の「スワイプ操作またはマウスでのドラッグ操作によるスライド切り替え機能」が動作しなくなったことで、クリック時のリンク先への遷移ができなくなっていました。
bxSlider の旧バージョンを利用していて、スライドがリンクになっている場合に、PC 版 Google Chrome でスライダーページを開いて、スライドをクリックしてみればチェックできます。
正攻法の対応としては
https://cdnjs.com/libraries/bxslider
などから入手可能なバージョン 4.2.15 以上に更新すれば解消します。
今回は bxSlider バージョン4.2.15への更新はせず、bxSlider のオプションで touchEnabled を false にするようにしました。
<script>
$("#hoge ul").bxSlider({
controls: false,
pager: false,
auto: true,
autoHover: true,
pause: 6000,
touchEnabled: false＞＞＞変更点
});
</script>
スライドショーを実装した案件がある方は確認してみた方がいいかもしれません。
- カテゴリー
- サイト制作全般
コメントを投稿する