Swiper でgoogleクロームでクリックすると挙動がおかしい。
こんにちは FULL Web Designの渡邊です。
Swiperというカルーセルで、safariではならなかたのですが、クロームやfirefoxで確認できる意図しない挙動が発生しました。
カルーセルで中心の画像意外をクリックすると、カルーセルが次に流れたり前に戻ったりする状態です。
コーダーさんにも相談して、ネット検索して、色々やりましたが、結局うまく行かず、
腰を入れてデバッグしました。２時間位さまよって、みつけましたのでここに記録します。
誰かの参考までに。
なぜだか スマホで２回タップしないとリンクが機能しない場合があり、それを回避するスクリプトを入れていました。
<script>
window.ontouchstart = function() {};
window.addEventListener('touchstart', function() {}, true);
window.addEventListener('touchstart', function() {}, false);
</script>
こいつが悪さしてまして、おかしかったようです。
そこでモバイルで分岐するようにして完成です。
<?php if (is_mobile()) ://スワイパーpcおかしくなるから分岐 ?>
<script>
window.ontouchstart = function() {};
window.addEventListener('touchstart', function() {}, true);
window.addEventListener('touchstart', function() {}, false);
</script>
<?php endif; ?>
といった感じで上手く動作しました。
それでは！
ホームページ制作ならFULL ウェブデザインにお任せ下さい。
開業12年以上の経験で、あなたのビジネス・サービスをインターネット上で認知されるお手伝いをいたします。
グラフィックデザインは２０年以上の経験ですので、シンプルかつ、いい感じにホームページを制作いたします。
お気軽にお問い合わせください。
初回お問い合わせは、メールにてお願いいたします。
編集者
Watanabe Kousuke
Webデザイナー／制作者。
中小企業・個人事業主向けに、集客と運用を意識したWebサイト制作を行っています。
デザインだけでなく、公開後に「使われ続けること」を重視した設計を大切にしています。
