Web制作

Swiper【thresholdを使おう】スワイプする要素内のリンクがクリックできない時の対応方法

スライドショーを作成するときによく用いられるライブラリに「Swiper」「Slick」の２大巨頭がありますが、今回はSwiperのお話です。

Swiper内のswiper-slideがリンクになっているケースというのはよくあることだと思います。
WordPressだったら記事一覧、Shopifyだったら商品一覧をスライドショー表示にしており、記事ないし商品１つ１つがswiper-slideになっている、みたいな。

aタグをクリックしてもリンク先に飛ばない事象が結構ある

Swiperを使ったことある人であればスライドショーの実装自体は簡単だと思いますが、意外と引っかかるのが「リンク先にうまく飛ばない」という事象。全くリンクが機能していない、というわけではないけど、「１クリックでうまくリンクが開かない」「クリックするとスライドが動いてしまう」ということが良く起こります。

タッチ関連のオプションを設定してないとリンク先に飛ばないことがある

これは、Swiperのタッチ関連オプションを設定していない場合に起こることが多いです。Swiperはデフォルトで、スワイプでスライダーが動くように設計されていますが、PCの場合、ドラッグでスライダーが動くようになっています。が、この「ドラッグ」判定が悪さをすることがあり、「ユーザーとしてはただのクリックなので、ドラッグだとSwiperが判断してしまう」ということが起こります。要するに、「ただクリックしただけなのにスライダーが動いてしまう」という事象が起こってしまうのです。
これは、Swiperのタッチ関連オプションを設定していないから起こる事象です。

タッチ関連オプションの「threshold」を設定しよう

上記の問題は、タッチ関連オプションを設定することで解決できます。解決できそうなオプションとして、
1「touchRatio」
2「simulateTouch」
3「shortSwipes」
4「threshold」
がありましたが、1~3は色んな設定をしてみましたがうまくいかず。4「threshold」を設定することで解決ができます。

thresholdは日本語訳すると「しきい値」だそうです。
機能としては、「この数値よりスワイプ距離が短い場合、スライダーは動かない。ピクセル単位で設定する。デフォルトは0。」
ということなので、これを試しに「10」にして設定。こうしたら、変にスライダーが動くことなく、aタグのリンクに遷移できるようになりました。

const swiper=newSwiper(".swiper", {
 spaceBetween:16,
 slidesPerView:4,
 threshold:10,
});
こんな感じね。
TOP