【React】カルーセルスライダーライブラリ「react-slick」の使い方

Reactでカルーセルスライダーを設置する方法として、「react-slick」という選択肢があります！ 今回は、早速「react-slick」というライブラリの使い方と応用を駆け足で紹介します！！

react-slickの特徴

• レスポンジブに対応している。
• ブレークポイントごとに、設定を変えることができる。
• 手軽にスラーダーを設定することができる。
• 設定が豊富（矢印、ページネーション、自動再生、マウスオーバーで自動再生を停止などそれ以外にも表示方法の設定など盛り沢山）
• スワイプ、マウスドラッグにも対応（リンクを設置する時には、スワイプするとリンクが発火するので、その対処も後日まとめます。）という点が挙げられる。

react-slickの導入

それでは、早速設定をしていきましょう。

step.1 index.htmlファイルにreact-slick用のcssファイルを読み込む。

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare

.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css" />

<link rel="stylesheet" type="text/css" charset="UTF-8"

href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/

slick.min.css" /> 

step.2 「react-slick」のパッケージをインストール

ターミナルで npmの場合は

npm install react-slick --save

yarnの場合は

yarn add react-slick

step.3 使用するファイルで、カルーセルスライダーをimportする。

Class Component の場合

import React, { Component } from "react";
import Slider from "react-slick";

export default class SimpleSlider extends Component {
  render() {
    const settings = {
      dots: true,
      infinite: true,
      speed: 500,
      slidesToShow: 1,
      slidesToScroll: 1
    };
    return (
      <div>
        <h2> Single Item</h2>
        <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>
      </div>
    );
  }
}

Functional Componentの場合

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>
  );
}

  以下の手順通りに設定すれば、手軽にカルーセルスライダーを導入することができます。

react-slickの応用

ブレークポイント（デバイスごと）で設定を変える方法

const settings = {
  dots: true,
  infinite: true,
  speed: 500,
  slidesToShow: 1,
  slidesToScroll: 1
};

設定方法の確認

settingsをSliderに埋め込むことでSliderに設定をすることが可能です。

<Slider {...settings}>
</Slider>

<Slider dots: true, infinite: true, speed: 500, slidesToShow: 1, slidesToScroll: 1>
</Slider>

↑
{...settings}は、スプレット構文なので実際にはこのように展開されています。なので、どちらの書き方でも可能です。

ブレークポイント（デバイスごと）で設定を変える方法

let settings
if (window.innerWidth < 768) {
  settings = {
    dots: true,
    infinite: true,
    speed: 500,
    autoplay: true,
    slidesToShow: 1,
    slidesToScroll: 1
  }
} else if (window.innerWidth < 1040) {
  settings = {
    dots: true,
    infinite: true,
    speed: 500,
    autoplay: true,
    slidesToShow: 2,
    slidesToScroll: 2
  }
} else {
   settings = {
   dots: true,
   infinite: true,
   speed: 500,
   autoplay: true,
   slidesToShow: 3,
   slidesToScroll: 3
  }
}

コード説明
window.innerWidthで画面の横幅を取得することができます。 コードを日本語に置き換えると

if (画面の横幅が768px以下の時) {
  スマホの画面サイズのときの設定
} else if (画面の横幅が1040px以下の時) {
   タブレットの画面サイズのときの設定
} else {
    pcの画面サイズのときの設定
}

このように記述することで各デバイスごとに設定することができます！！ 以上「react-slick」の説明でした〜！！