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年以上の経験で、あなたのビジネス・サービスをインターネット上で認知されるお手伝いをいたします。

グラフィックデザインは２０年以上の経験ですので、シンプルかつ、いい感じにホームページを制作いたします。

お気軽にお問い合わせください。

初回お問い合わせは、メールにてお願いいたします。

お問い合わせフォーム