React Slickの基本的な使い方

スライダー＆カルーセルを実装するモジュールでjQueryプラグインで広く知られるslickのReact版。

##React Slick

https://react-slick.neostack.com/


https://github.com/akiran/react-slick


##導入方法
####インストール
```
npm install react-slick --save
or
yarn add react-slick
```

####cssの設置
設置場所はcreat-react-appで作成している時のpublic/index.html相当のheadタグ内に以下を記述する。

・CDN

```
<link rel="stylesheet" type="text/css" charset="UTF-8" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css" /> 
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css" />
```

・インストールする場合はインストール後にimportする

```
npm install slick-carousel --save
or
yarn add slick-carousel
```
↓

```
import "~slick-carousel/slick/slick.css"; 
import "~slick-carousel/slick/slick-theme.css";
```

##オプション
| オプション名 | type | default | 説明 | 
|:-----------|------------:|:------------:| :------------:|
|accessibility|bool|true|tabキー、矢印キーによる操作を可能にするかどうか|
|adaptiveHeight|bool|false|スライドの高さを自動で調整するかどうか|
|afterChange|func|default|スライド移動後のコールバック関数|
|appendDots|func|default|ドット部分にカスタムテンプレートを適用できる、customPagingと同じ働き|
|arrows|bool|true|スライドの左右にある矢印の表示・非表示|
|asNavFor|ref|undefined|別のスライダーとの同期を可能にする|
|autoplaySpeed|int|3000|自動でスライドするときのスピード|
|autoplay|bool|false|自動でスライドするかどうか|
|beforeChange|func|null|スライド移動前のコールバック関数|
|centerMode|bool|false|表示しているスライドを真ん中にもってくるか(複数枚表示時）|
|centerPadding|string|50px|スライドとスライドの間隔|
|className|string|""|スライダー内のdivに任意のクラス名を付与できる|
|customPaging|func||ドット部分にカスタムテンプレートを適用できる|
|dotsClass|string|'slick-dots'|dotに任意のクラス名を付与できる|
|dots|bool|default|ドットの表示・非表示|
|draggable|bool|true|デスクトップ上でのドラッグによるスクロールの有効にするか|
|cssEase(easing)|string|'linear|アニメーションのイーシングの変更|
|fade|bool|default|スライドの切り替えをfadeにするか|
|focusOnSelect|bool|false|選択したスライドまで動くか(複数枚表示)|
|infinite|bool|true|スライダーを無限にスライドできるか|
|initialSlide|int|0|初期表示のスライドを指定できる|
|lazyLoad|ondemand`/`progressive|null|画像やコンポーネントを遅延ロードする|
|onEdge|func|null||
|onInit|func|null|componentWillMountにあたるもの|
|onLazyLoad|func|null|遅延ロード後のコールバック関数|
|onReInit|func|null|componentDidUpdateにあたるもの|
|onSwipe|func|null|スワイプによるスライド変更後のコールバック関数|
|pauseOnDotsHover|bool|bool|ドットにホバーしているときに自動スライドを止めるか|
|pauseOnFocus|bool|false|スライドを選択したときに自動スライドを止めるか|
|pauseOnHover|bool|true|スライドにホバーしているときに自動スライドを止めるか|
|responsive|array|null|任意のブレイクポイントで何枚スライドを表示するかなどの指定ができる|
|rows|integer|1|行数の指定|
|rtl|bool|false|スライドの順番を逆にする|
|slide|string|'div'|スライドの要素を変更できる|
|slidesPerRow|int|1|グリッドモード時に表示するスライドの数(rowsを指定したときのみ有効)|
|slidesToScroll|int|1|一度のスクロールで何枚スライドするか|
|slidesToShow|int|1|一度に表示するスライドの数|
|speed|int|500|スライドするスピード|
|swipeToSlide|bool|false|ドラッグ、スワイプでのスクロールを有効にするか|
|swipe|bool|true|スワイプでのスライドの変更の有効/無効|
|touchMove|bool|true|ドラッグやスワイプでスライダーが動くか|
|touchThreshold|int|5|スライドを変更する際のドラッグ、スワイプの値の指定(数字を大きくすればすこしのドラッグ、スワイプで次のスライドにいく)|
|useCSS|bool|true|CSS Transitionsの有効/無効|
|useTransform|bool|true|CSS Transformの有効/無効|
|variableWidth|bool|false|スライドごとのwidthの指定の有効/無効|
|vertical|bool|false|縦向きスライドの有効/無効|

※onEdgeのみ公式の説明や検索しても使用方法がわかりませんでした...
※公式ではeasingとなっていますが、githubのissueを確認したところ正しくはcssEaseのようです。

##メソッド
| メソッド名 | args | default | 説明 | 
|:-----------|------------:|:------------:| :------------:|
|slickGoTo|index, dontAnimate|null, false|引数に現在のスライドの順番を取れる,dotAnimateをtrueにするとアニメーションがなくなる|
|slickNext|none|none|次スライドにいく|
|slickPause|none|none|autoplayを停止する|
|slickPlay|none|none|autoplayを有効にする|
|slickPrev|none|none|前のスライドにいく|

##サンプル
簡単な実用例

```app.js
import Slider from "react-slick";

function App() {
  const settings = {
    dots: true,
    infinite: true,
    speed: 500,
    slidesToShow: 1,
    slidesToScroll: 1,
    arrow: true,
  };

  const items = [
    {title: "name1", img: 'http://placehold.it/500x200'},
    {title: "name2", img: 'http://placehold.it/500x200'},
    {title: "name3", img: 'http://placehold.it/500x200'},
    {title: "name4", img: 'http://placehold.it/500x200'},
    {title: "name5", img: 'http://placehold.it/500x200'},
    {title: "name6", img: 'http://placehold.it/500x200'},
  ]

  return (
    <div className="App">
      <p>simple slider</p>
      <div className="container">
        <Slider {...settings}>
          {items && items.map(item => {
            return (
              <div>
                <img src={item.img} />
                <p>{item.title}</p>
              </div>
            )
          })}
        </Slider>
      </div>
    </div>
  );
}

export default App;
```
簡単な説明
一行目でSliderをインポート。これで該当要素をラップすることでスライダーとして機能します。
定数のsettingsにはオブジェクト型でオプションを記述し、Sliderに渡してあげます。
また業務ではapiなどを使用しデータを取得後に、表示させるようなことが多いと思ったので、ダミーデータは連想配列の形にしてみました。
１点注意なのは`items &&`の部分が無いと初期表示がバグってしまう事象があったので、データを取得してきて表示するような場合は忘れないように記述するといいと思います。
またcssですが、上記にあるオプションを使用して、ドット部分などに任意のクラス名をつけてcssを適用してもいいですし、デフォルトのクラスのままでもcssは反映されます。

もっとシンプルな例や上記のオプションやメソッドを使用した公式サンプルを見てみてもいいと思います。
https://react-slick.neostack.com/docs/example/simple-slider

##補足
公式sampleにあるAsNavForですが３つ以上のスライダーを同期させたい場合は以下のようにするとできました。

```
constructor(props) {
    super(props);
    this.state = {
        nav1: null,
        nav2: null,
        nav3: null,
    };
}

componentDidMount() {
    this.setState({
        nav1: this.slider1,
        nav2: this.slider2,
        nav3: this.slider3,
    });
}

<Slider
       className="background-slider"
       asNavFor={this.state.nav2}
       ref={slider => (this.slider1 = slider)}
       {...settings1}> ...
</Slider>
<Slider
       className="content-slider"
       asNavFor={this.state.nav3}
       ref={slider => (this.slider2 = slider)}
       {...settings2}> ...
</Slider>
<Slider
       className="person-slider"
       asNavFor={this.state.nav1}
       ref={slider => (this.slider3 = slider)}
       {...settings3}> ...
</Slider>
```