2019.08.23

【React】スライダープラグイン「slick」のReact版「react-slick」の使い方

slickのことをjQueryプラグインとして覚えている人も多いと思う。slickは、スライダー＆カルーセルを実装するプラグインでカスタマイズオプションも豊富に用意されていて使い勝手がよい。

わたしも多くの案件でスライダー実装には、slickを使ったものだ。いまでも静的サイトコーディングでスライダー実装が必要ならば、真っ先にslickを検討するはずだ。

そんなslickだが、jQueryプラグインであることから、昨今のSPAやSSR案件では使う機会が遠のいているのも事実。ReactやVue、Angularといったライブラリにもスライダー＆カルーセルを実装するライブラリがあるからだ。そんな環境にわざわざjQueryを入れようとは思わない。

ところが、React用にモジュール化されたslickがあることを知った。

このエントリーでは、React環境でも使えるslickの移植版「react-slick」を紹介したい。

react-slickについて
- 特徴
react-slickを触ってみる
- インストール
- CSSを設置
react-slickを使ってみる
まとめ

react-slickについて

スライダー＆カルーセルを実装するモジュールだ。jQueryプラグインで広く知られるslickがReactコンポーネントで使えるモジュールとなっている。

【slick】
https://kenwheeler.github.io/slick/

【React Slick】
https://react-slick.neostack.com/

特徴

レスポンシブ対応している
ブレークポイントごとにレイアウト変更できる
CSS3で動作する
スワイプ、マウスドラッグ
左右を少し見せる
矢印、ページネーション、自動再生、マウスオーバーで自動再生を停止
slickの破棄

react-slickを触ってみる

react-slickのインストールと設置方法について触れてみよう。

インストール

インストールは、プロジェクトルートで追加コマンドを実行する。

$ npm install react-slick --save
# or
$ yarn add react-slick

コマンド実行後は、package.jsonに"react-slick": "x.x.x",が追加されているはずだ。

CSSを設置

react-slickもslickプラグイン同様にCSSを設置しなければならない。react-slickはjQuery版slickの移植であるため、CSSはオリジナルのものを使わなければならない。CSSの設置は、CDNのものを使うか、slick-carouselをインストールして使う。

CDNで読み込む cdnjs

CDNにホストされているCSSファイルを読み込む。<link>タグで読み込むのだから、publicルートのindex.htmlに記述するとよい。

<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" />

npm (or yarn) でインストール

$ npm install slick-carousel --save
# or
$ yarn add slick-carousel

いまほどインストールしたslick-carouselのCSSファイルをインポートする。

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

react-slickを使ってみる

react-slickを使ってみよう。スライダーUI用のコンポーネントを作ることを想定している。保存するファイル名は任意にしてもらって構わない。

import React from "react";
import Slider from "react-slick";
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";
export default function SimpleSlider() {
  const settings = {
    dots: true,
    infinite: true,
    speed: 500,
    slidesToShow: 1,
    slidesToScroll: 1
  };
  return (
    <Slider {...settings}>
      <div>
        <h3>1</h3>
      </div>
      <div>
        <h3>2</h3>
      </div>
      <div>
        <h3>3</h3>
      </div>
      <div>
        <h3>4</h3>
      </div>
      <div>
        <h3>5</h3>
      </div>
      <div>
        <h3>6</h3>
      </div>
    </Slider>
  );
}

上記のソースコードでは、一枚ずつ切り替わるスライダーを実装している。settings定数に指定しているオプション名もオリジナルslickそのもので、jQuery版slickのオプションを流用すればよい。オプションをオブジェクト形式で記述しているところもまったく同じで懐かしさを覚える。

まとめ

React環境でも使えるslickの移植版「react-slick」の紹介だった。

jQueryプラグインで使った経験があるのならば、余計な学習が不要で馴染みやすいものだと思う。あらたに使い始めるという場合においても、わずらわしい依存性がないことで導入しやすいはずだ。スライダーカスタマイズにしても、jQuery版slickの情報がたくさん公開されているので、困ることはない。ぜひ試してもらいたいモジュールのひとつだ。

このエントリーが、あなたのクリエイティビティを刺激するものであると期待したい。