【JS】Swiper.js リンク先に遷移しない時の解決方法

/ Web技術 / By takec23com

Swiper.jsを使って実装していた時にハマってしまったことがあった。

それは、Androidのブラウザでaタグに設定したリンクにクリック/タップしても遷移しなかったことだ。

そこでjsに「watchSlidesProgress: true」を追加することで解決することができた。

HTML

<div class="swiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide"><a href="https://www.google.com/?hl=ja">google</a></div>
    <div class="swiper-slide"><a href="">https://www.apple.com/jp/</a></div>
    <div class="swiper-slide"><a href="https://www.amazon.co.jp/">amazon</a></div>
  </div>
</div>

JS

const swiper = new Swiper('.swiper', {
  direction: 'vertical',
  loop: true,
  watchSlidesProgress: true,//これを追加
});

(Visited 603 times, 1 visits today)