[react-slick]Reactでカルーセルを実装するプラグイン │ wonwon eater

Reactで画像がスライドして次々と表示されるカルーセルを実装するために便利なプラグイン「react-slick」の紹介です。

react-slickのサンプル

こんなやつです。

1画面に3つずつスライドするような場合、slideToShowに3を指定するだけで実現できます。

Reactからしたらカルーセルで表示したい画像はただ配列で持ってるだけです。
イマイチなプラグインだと、3つずつ表示したいなら、そのようにHTMLを出力しなきゃいけないです。

<div>
    <img src="./img01.png" />
    <img src="./img02.png" />
    <img src="./img03.png" />
</div>

react-slickなら、カルーセルにしたいデータをとにかく書き出して何枚ずつ表示するかはSliderに設定するだけでOKです。

<Slider {...settings}>
  {images.map((img) => (
    <div>
      <img src={img} />
    </div>
  ))}
</Slider>

npm

npm i react-slick

yarn

yarn add react-slick

サンプルでは画像が3枚並んでおり、間に白い余白があるように見えますが、これは余白ではなく縁が白い画像です。紛らわしい。
残念ながら、Sliderのpropsとして余白を設定することは出来ないようです。

Issue – how can i set slide item margin?に挙がっており作者自身が以下のように回答しています。

Using css is the best way to control margin/padding on slides

CSS使えということなので、cssを作成して既存のクラスを上書きします。

slickSlick.cssなど適当なファイルを作成します。
slideで使用されている以下のクラス名にpaddingを追加します。

.slick-slide {
  padding: 0 15px;
}

使用したいコンポーネントファイルの先頭でcssを読み込みます。

import style from './slickSlide.css';