【超簡単】React Responsive Carouselの使い方

この記事ではReact Responsive Carouselの使い方がよく分からない人向けに、React Responsive Carouselの使い方を分かりやすく解説しています。

ぜひ参考にしてみてください！

React Responsive Carouselとは

React Responsive Carouselとは、Reactアプリ用の強力で軽量で完全にカスタマイズ可能なカルーセルライブラリのことです。

ちなみにReact Responsive Carouselを使えば、こんなカルーセルが簡単に作れちゃいます！

カスタマイズも簡単なので、Reactでカルーセルを利用するならオススメのライブラリです。

React Responsive Carouselの導入方法

React Responsive Carouselの導入方法です。

React Responsive Carouselを導入するには以下のコマンドをターミナルで入力してください。

npm install react-responsive-carousel

yarn add react-responsive-carousel

上記のコマンドを入力出来たら、後はimportしてすぐに扱うことが出来ます。

import { Carousel } from 'react-responsive-carousel';
import "react-responsive-carousel/lib/styles/carousel.css";

const Test = () => {
  return (
    <Carousel>
      <div>
        <img src={test1} />
      </div>
      <div>
        <img src={test2} />
      </div>
    </Carousel>
  )
}

画像の大きさにも寄りますが、下記のようなカルーセルが作成出来ると思います。

React Responsive Carouselのカスタマイズ方法

ここからはReact Responsive Carouselのカスタマイズ方法について解説していきます。

React Responsive Carouselをカスタマイズするには、propsにカスタムしたい内容受け渡すことで変更することが出来ます。

<Carousel //ここに変更したい内容を記入する>
</Carousel>

この記事では実際に以下の内容をカスタマイズしてみました。

他のカスタマイズ方法を知りたい場合は、以下のサイトが参考になります。

自動再生

自動でカルーセルをスライドさせたい場合は以下のコードを試してみて下さい。

<Carousel autoPlay="true"></Carousel>

矢印のCSS変更

カルーセルの両端についている矢印のCSSを変更したい場合は以下のコードを試してみて下さい。

const arrowStyles = {
  position: 'absolute',
  width: 40,
  height: 40,
  zIndex: 2,
  top: 'calc(50% - 15px)'
}

return (
  <Carousel
    renderArrowPrev={(onClickHandler, hasPrev, label) =>
      hasPrev && (
        <button onClick={onClickHandler} title={label} style={{ ...arrowStyles, left: 15 }}>-</button>
      )
    }
    renderArrowNext={(onClickHandler, hasNext, label) =>
       hasNext && (
        <button onClick={onClickHandler} title={label} style={{ ...arrowStyles, right: 15 }}>+</button>
       )
    }
  >
  </Carousel>
)

上記のコードに変更すれば、以下のようなカルーセルを作成することが出来ます。

カルーセル下部にある小さな点のCSS変更

カルーセル下部にある小さな点のCSSを変更したい場合は以下のコードを試してみて下さい。

const indicatorStyles= {
  background: '#fff',
  width: 8,
  height: 8,
  display: 'inline-block',
  margin: '0 8px',

  border: 'solid 1px'
}

return (
  <Carousel
    renderIndicator={(onClickHandler, isSelected, index, label) => {
      if (isSelected) {
        return (
          <li
            style={{ ...indicatorStyles, background: '#000' }}
            aria-label={`Selected: ${label} ${index + 1}`}
            title={`Selected: ${label} ${index + 1}`}
          />
       );
     }
     return (
       <li
         style={indicatorStyles}
         onClick={onClickHandler}
         onKeyDown={onClickHandler}
         value={index}
         key={index}
         role="button"
         tabIndex={0}
         title={`${label} ${index + 1}`}
         aria-label={`${label} ${index + 1}`}
       />
      );
    }}
  >
  </Carousel>
)

上記のコードを試してみると以下のような画像になります。

右上のページ番号のCSS変更

右上のページ番号を変えたい場合は以下のコードを試してみて下さい。

<Carousel
 statusFormatter={(current) => `${current}page`}
>
</Carousel>

上記のコードを試してみると以下のような画像になります。