react-slickの矢印をカスタマイズしてオリジナリティを出す

ライブラリのスライダーは便利ですが、矢印ボタンがデフォルトのままでは、オリジナリティを出せないですよね。

そこで今回は、react-slickのデフォルトでもつ矢印をスタイル変更していきたいと思います。

react-slickとは

react-slickとは、スライダーを簡単に実装できるReact.jsのライブラリ。 オプションが豊富で、jQueryのプラグインとして有名だったそうです。

スライダーの実装

1, react-slickをインストール

yarn add  react-slick  slick-carousel @types/react-slick

slick-carouselは、slickのcssファイルになります。

2, react-lickをimport

import Slick from "react-slick";
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";

3, sliderの設定を記述

const settings = {
  dots: true,
  infinite: true,
  speed: 500,
  slidesToShow: 1,
  slidesToScroll: 1,
  nextArrow: <SampleNextArrow />, //矢印のコンポーネントを自分で実装
  prevArrow: <SamplePrevArrow />,
};

オプションについては、後述します。

ここで、nextArrow、prevArrowにコンポーネントを指定することによって、矢印のボタンをカスタマイズすることができます。 こちらに渡すのはコンポーネントなので、そのままJSXの要素を渡すとエラーになります。僕はここで、悩みました。

4, sliderを配置

Slickタグの中にスライドさせたい要素を配置します。

return (
  <div className={styles.flex}>
    <ul className={styles.content}>
      <Slick {...settings}>
        <div className={styles.slider1} />
        <div className={styles.slider2} />
      </Slick>
    </ul>
  </div>
);

もっと上手いやり方があると思うのですが、全画面のsliderを作成する場合、以下のcssを当てることで実装できます。見やすいように背景を黒色にしています。

.flex {
  width: 100%;
  height: 100vh;
  position: relative;
  display: flex;
  justify-content: center;
  background-color: #002643;
}

.content {
  width: calc(100% - 50px);
}

.slider1 {
  background-color: yellow;
  text-align: center;
  height: 100vh;
  width: 100%;
}

.slider2 {
  background-color: red;
  text-align: center;
  height: 100vh;
  width: 100%;
}

これで、スライダーの実装はできました。両ボタンを押すとスライダーが作動します。

5, コンポーネントの作成

ではカスタマイズするボタンコンポーネントを作成します。

ここで、react-slickが持っているclassNameやstyleをpropsをして渡すことができるのですが、今回スタイルは自分でカスタマイズするので、onClickだけpropsで渡します。

const SamplePrevArrow = ({onClick}: Props)  => {
  return (
    <div
      onClick={onClick}
    >
      <button className={styles.prev}>Prev</button>
    </div>
  );
}

SampleNextArrowも同じように、記述します(ここでは省略)。

onClickの型はベストプラクティスがわからず、

interface Props {
  onClick?: (event: React.MouseEvent<HTMLSpanElement, MouseEvent>) => void;
}

6, スタイルを当てる

ボタンにスタイルを当てます。今回はとてもシンプルに、

.next {
  width: 50px;
  height: 50px;
  color: #fff;
  font-size: 16px;
  background-color: orange;
  position: absolute;
  z-index: 50;
  top: 30px;
  right: 30px;
}

.prev {
  width: 50px;
  height: 50px;
  color: #fff;
  font-size: 16px;
  background-color: skyblue;
  position: absolute;
  z-index: 50;
  top: 30px;
  left: 30px;
}

これで、スライダーの矢印ボタンをカスタマイズすることができました。

react-slickのオプション

他にもさまざまなオプションがあります。

【react-slick】