ku____maaa’s blog

webエンジニア 、フロントエンドについてつぶやきます!!

カルーセル スライダーにリンクを設置する方法

多くのwebサイトでは、カルーセルを使用する際、カルーセルにリンクを設置しています!
例えば、メディアサイトでは、カルーセルに記事リンクを設置したり、ECサイトでは、カルーセルに商品リンクを設置しているUIがよく見かけます!

今回は、カルーセルにリンクを設置した際に発生するバグを解決する方法について述べたいと思います!!

【どんなバグか】
ルーセルを横スワイプするときに、横にスクロールできず、リンクが発火してしまうというバグです!
僕が実際に利用しているvueの「hooper」やreactの「react-slick」ではこのようなバグが発生しています!他のライブラリでも同様なバグか起きているかもしれません。

【原因】
ブラウザ上でスワイプイベントが用意されていないことが原因で、スワイプ操作がクリック操作だとブラウザで認識されリンクが発火してしまうのだと考えられます!

【対策】
対策は簡単で、スワイプイベントを検知してくれるライブラリを使うだけです!Hammer.jsを利用しましょう!!
実際、僕が使ったライブラリは、「react-hammerjs」です。

「react-hammerjs」の導入の手順
手順①

npm install --save react-hammerjs

手順②

使用するファイルで

import React from "react"
import Hammer from "react-hammerjs"

…省略
<Hammer onTap={onTapAndMove}>
  <スワイプイベント発火させたい要素>
</Hammer>
…省略
const onTapAndMove = () => {
   history.push(`飛ばしたいリンク`)
}

様々なプロパティーを設定できますが、今回使用するのは、onTapプロパティです。
ロジックとしてはシンプルで、Hammer内の要素をタップ(クリック)したときだけイベント(リンク)が発火するようになっております。これだけでスワイプするときにリンクが発火しなくなります。

以上、カルーセル スライダーにリンクを設置する方法でした!!!