React Slickの基本的な使い方

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

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>