React Slickを使ってみた。

概要

依頼にスワイプになるバナーを作ってほしいという内容があった。
デザイン作業も必要だったので、material uiを使ってみようと思ったが、会社コードはmaterial uiのバージョンがあまりにも低くてスワイプバナーを作ることができなかった。

そんな中、react slickということを知り、簡単に解決できた。
今日はreactslickについて記述しようと思う。

React Slick

インストール

先にインストールしてみよう

npm install react-slick --save

yarn add react-slick

yarn または npm からのインストールが完了したら、プロジェクトに CSS を含める必要があります

npm install slick-carousel --save

例

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

export default class MultipleItems extends Component {
  render() {
    const settings = {
      dots: false,
      infinite: true,
      speed: 500,
      slidesToShow: 3,
      slidesToScroll: 3
    };
    return (
      <div>
        <h2> Multiple items </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>
        </Slider>
      </div>
    );
  }
}

コード作成することで上のようにカルーセルができた。
基本は、HTMLコードがsettingsに合わせてカルーセルになる構成だ。

自分の場合、左右のボタンの色やデザインの変更する必要があった。
調べてみたら、settingsで編集ができた。

const settings = {
  dots: false,
  arrows: true,
  infinite: true,
  speed: 500,
  slidesToShow: 1,
  slidesToScroll: 1,
  autoplay: true,
  autoplaySpeed: 2500,
  prevArrow: <PrevArrow />,
  nextArrow: <NextArrow />,
};

上記のようにautoplayの設定もできるし、左右のボタンの修正も可能だ。
まず、prevArrow、nextArrowに、を適用した。

const PrevArrow = (props: CustomArrowProps) => {
    const { className, style, onClick } = props;
    return (
        <img
            style={{ ...style, top: ‘63%’ }}
            className={className}
            src={`${IMG_PATH}img/exchange/sliderPreviewButton.svg`}
            onClick={onClick}
        />
    );
};

const NextArrow = (props: CustomArrowProps) => {
    const { className, style, onClick } = props;
    return (
        <img
            style={{ ...style, top: ‘63%’ }}
            className={className}
            src={`${IMG_PATH}img/exchange/sliderNextButton.svg`}
            onClick={onClick}
        />
    );
};

欲しいボタンの画像を使うのもできる、大きさの修正もできる。
修正した結果は以下になる。

終わり

https://react-slick.neostack.com/
上記のサイトでドキュメントと例題を確認することができる。
色んな例があるので、試しに使ってみるのも勉強になると思う。