Reactで使えるスライダー、React Slickのご紹介

jQeury用スライダーのプラグインとして、Slickを使ったことがある方は多いと思いますが、
React版のSlickが存在していることを知りましたので、ご紹介いたします。

公式サイト

使い方は、おそらくjQuery版よりも簡単です。

作ってみたもの
DEMO

Reactを使っている環境で、


npm install react-slick slick-carousel --save

1	npm install react-slick slick-carousel --save

または


yarn add react-slick

1	yarn add react-slick

を実行してインストール。

Slickを設置したいコンポーネントの入ったJS(TS)ファイルなどで、モジュールを呼び出します。


import Slick from "react-slick";

1	import Slick from "react-slick";

CSSはjQuery版のSlickから流用するようですね。
以下のようにslick-carouselのCSSを読み込み


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

1 2	import "~slick-carousel/slick/slick.css"; import "~slick-carousel/slick/slick-theme.css";

そして、スライダーにしたい要素を<Slider>で囲みます。
設定はsettingsにjQuery版と同様の設定を行い、<Slider {…settings}> のようにスライダーのコンポーネントに渡します。


  function Slider() {
  const settings = {
    dots: true,
    infinite: true,
    speed: 500,
    slidesToShow: 1,
    slidesToScroll: 1
  };
  return (
    <ul className="slider">
      <Slick {...settings}>
        <li><img src="img/1.jpg" alt="Sample Image"/></li>
        <li><img src="img/2.jpg" alt="Sample Image"/></li>
        <li><img src="img/3.jpg" alt="Sample Image"/></li>
        <li><img src="img/4.jpg" alt="Sample Image"/></li>
        <li><img src="img/5.jpg" alt="Sample Image"/></li>
      </Slick>
    </ul>
  );
}