react-slick のご紹介 (Slick, React, JavaScript)

JavaScript

2017.06.30

どうもfujiharaです。本日はSlickスライダーをReactコンポーネント化したreact-slickの紹介をします。

インストール

まずは react-slick をインストールします。


$ npm i -D react-slick
** その他のパッケージについては今回割愛させていただきます。

各種ファイル

HTML


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>React Slick</title>
</head>
<body>
<div id="slick-target"></div>
<script src="/js/index.bundle.js"></script>
<link rel="stylesheet" type="text/css" 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" />
</body>
</html>

index.js


import React from 'react';
import { render } from 'react-dom';
import Slider from 'react-slick';

class Slick extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      slides: [{name:'first'},{name:'second'},{name:'third'},{name:'forth'}],
      config: {
        dots: true,
        infinite: true,
        speed: 500,
        slidesToShow: 1,
        slidesToScroll: 1
      }
    };
  }

  /** ↓ 本来なくて良いです**/
  componentDidMount() {
    setTimeout(() => {
      let updateSlides = this.state.slides;
      updateSlides.map((value, index) => {
        value.name = index + 1;
        return value;
      });
      this.setState({slides: updateSlides});
    },3000)
  }
  /** ↑ 本来なくて良いです**/

  render () {
    let config = this.state.config;
    let slides = this.state.slides;
    return (
      <Slider {...config}>
        {slides.map(slide => {
          return [<div><h3>{slide.name}</h3></div>];
        })}
      </Slider>
    );
  }
}

render(
  <Slick />,
  document.getElementById('slick-target')
);

説明

後は index.jsをコンパイルするだけです。基本的な動作は Slick クラスの constructor, render 関数で動作します。今回追加してある componentDidMount はスライダー作成後にスライダーの中身を更新するようするための処理です。(上記の場合スライダー生成し3秒後にスライドの中身が数字に変化します。
通常 props が更新されたタイミングで Slick の stateを変えスライダーの表示を更新するかと思います。
具体的なオプションについては github 上のreact-slickをご確認下さい。
弊社でもよく使用するSlickがReactコンポーネント化されて更に使いやすくなりました。皆様も是非使ってみて下さい。