カルーセル スライダーにリンクを設置する方法
多くの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内の要素をタップ（クリック）したときだけイベント（リンク）が発火するようになっております。これだけでスワイプするときにリンクが発火しなくなります。
以上、カルーセル スライダーにリンクを設置する方法でした！！！
【React】カルーセルスライダーライブラリ「react-slick」の使い方
Reactでカルーセルスライダーを設置する方法として、「react-slick」という選択肢があります！ 今回は、早速「react-slick」というライブラリの使い方と応用を駆け足で紹介します！！
react-slickの特徴
- レスポンジブに対応している。
- ブレークポイントごとに、設定を変えることができる。
- 手軽にスラーダーを設定することができる。
- 設定が豊富（矢印、ページネーション、自動再生、マウスオーバーで自動再生を停止などそれ以外にも表示方法の設定など盛り沢山）
- スワイプ、マウスドラッグにも対応（リンクを設置する時には、スワイプするとリンクが発火するので、その対処も後日まとめます。）という点が挙げられる。
react-slickの導入
それでは、早速設定をしていきましょう。
step.1 index.htmlファイルにreact-slick用のcssファイルを読み込む。
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare .com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css" /> <link rel="stylesheet" type="text/css" charset="UTF-8" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/ slick.min.css" />
step.2 「react-slick」のパッケージをインストール
ターミナルで npmの場合は
npm install react-slick --save
yarnの場合は
yarn add react-slick
step.3 使用するファイルで、カルーセルスライダーをimportする。
Class Component の場合
import React, { Component } from "react";
import Slider from "react-slick";
export default class SimpleSlider extends Component {
render() {
const settings = {
dots: true,
infinite: true,
speed: 500,
slidesToShow: 1,
slidesToScroll: 1
};
return (
<div>
<h2> Single Item</h2>
<Slider {...settings}>
<div>
<h3>1</h3>
</div>
<div>
<h3>2</h3>
</div>
<div>
<h3>3</h3>
</div>
<div>
<h3>4</h3>
</div>
<div>
<h3>5</h3>
</div>
<div>
<h3>6</h3>
</div>
</Slider>
</div>
);
}
}
Functional Componentの場合
import React from "react";
import Slider from "react-slick";
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";
export default function SimpleSlider() {
const settings = {
dots: true,
infinite: true,
speed: 500,
slidesToShow: 1,
slidesToScroll: 1
};
return (
<Slider {...settings}>
<div>
<h3>1</h3>
</div>
<div>
<h3>2</h3>
</div>
<div>
<h3>3</h3>
</div>
<div>
<h3>4</h3>
</div>
<div>
<h3>5</h3>
</div>
<div>
<h3>6</h3>
</div>
</Slider>
);
}
以下の手順通りに設定すれば、手軽にカルーセルスライダーを導入することができます。
react-slickの応用
const settings = {
dots: true,
infinite: true,
speed: 500,
slidesToShow: 1,
slidesToScroll: 1
};
設定方法の確認
settingsをSliderに埋め込むことでSliderに設定をすることが可能です。
<Slider {...settings}>
</Slider>
<Slider dots: true, infinite: true, speed: 500, slidesToShow: 1, slidesToScroll: 1> </Slider>
↑
{...settings}は、スプレット構文なので実際にはこのように展開されています。なので、どちらの書き方でも可能です。
ブレークポイント（デバイスごと）で設定を変える方法
let settings
if (window.innerWidth < 768) {
settings = {
dots: true,
infinite: true,
speed: 500,
autoplay: true,
slidesToShow: 1,
slidesToScroll: 1
}
} else if (window.innerWidth < 1040) {
settings = {
dots: true,
infinite: true,
speed: 500,
autoplay: true,
slidesToShow: 2,
slidesToScroll: 2
}
} else {
settings = {
dots: true,
infinite: true,
speed: 500,
autoplay: true,
slidesToShow: 3,
slidesToScroll: 3
}
}
コード説明
window.innerWidthで画面の横幅を取得することができます。
コードを日本語に置き換えると
if (画面の横幅が768px以下の時) {
スマホの画面サイズのときの設定
} else if (画面の横幅が1040px以下の時) {
タブレットの画面サイズのときの設定
} else {
pcの画面サイズのときの設定
}
このように記述することで各デバイスごとに設定することができます！！ 以上「react-slick」の説明でした〜！！
