React Slickの基礎知識

はじめに

業務の中でreact-slickを使用する機会があったので
使用方法やオプションなどメモ代わりに書いていきたいと思います。
ユースケースは別で書こうと思います。

アジェンダ

• React Slickとは
• 導入
• 使用方法
• 個人的よく使うオプション

React Slickとは

react-slick/git-hub
React Slick Documentation

スライダーやカルーセルを簡単に実装でき、
レスポンシブ対応や豊富なオプションを使用できるのが特徴です
元々jQeryのプラグインであるSlickを
Reactでも使用できるようモジュール化したものになります。

導入

npmを使用する場合の導入までを公式から拝借。
パッケージのインストール

npm install react-slick --save

CSSをインストール

npm install slick-carousel

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

これで準備は整いました。

使用方法

ここでは画像3枚を配列に入れて使用しています。
settingsにオプションを指定し、Sliderに渡すだけで
簡単にカスタムすることができます。

import React from "react";
import Slider from "react-slick";

export default function SimpleSlider() {
  const settings = {
    dots: true,
    infinite: true,
    speed: 500,
  };
  
  const images = [image, image2, image3]
  return (
    <Slider {...settings}>
      {images.map(img)=>
        <div>
          <img src={img} alt="pictuer" />
        </div>
      }
    </Slider>
  );
}

個人的よく使うオプション

個人的によく使うオプションを中心に紹介します。
jQueryのSlickとは異なる部分もあるので注意が必要です。
なお主観で機能と見た目でオプションを分類しています。

機能に関するオプション

autoplay

スライドを自動再生します。
Type: bool
Default: false

infinite

コンテンツをループさせます(① -> ② -> ③ -> ① ...)
Type: bool
Default: true

initialSlide

最初に表示するスライドを指定します。
Type: int
Default: 0

lazyLoad

画像の読み込むタイミングを指定します。
progressiveは最初にまとめて、
ondemandは遅延読み込みをします。
Type: ondemand / progressive
Default: null

slidesToScroll

一度にスライドを何枚スクロールするか指定します。
Type: int
Default: 1

slidesToShow

フレーム内にスライドを何枚表示するかを指定します。
Type: int
Default: 1

speed

スクロール、フェードアニメーションの速度msで指定します。
Type: int
Default: 500

pauseOnHover

autoplayがtureの場合に
自動再生をマウスホバーで一時停止します。
Type: bool
Default: false

見た目に関するオプション

arrows

「前」「次」のスライドを操作する矢印を表示します。
Type: bool
Default: true

centerMode

現在表示しているスライドを中央に配置し、
次のスライドを少し見切れて表示させます。
Type: bool
Default: false

centerPadding

centerModeを指定した場合に
見切れて表示をさせる割合を指定します。
Type: string
Default: '50px'

customPaging

dotsがtrueの場合ドットナビをカスタムできます。
Type: func
Default: i => <button>{i + 1}</button>

dots

ドットナビを表示します。
Type: bool
Default: false

fade

スライドの切り替え方をフェードにします。
Type: bool
Default: false

nextArrow

arrowsがtureの場合に
「次」の矢印の見た目をHTMLでカスタムできます。
Type: html
Default: <button type=”button” class=”slick-next”>NEXT</button>

prevArrow

arrowsがtureの場合に
「前」の矢印の見た目をHTMLでカスタムできます。
Type: html
Default: <button type=”button” class=”slick-prev”>Previous</button>

おわりに

カルーセルも一から実装しようと思うと手間ですが
Slickだと、とても簡単に実装できます。

最後まで、見ていただきありがとうございました。