React-Redux-TypescriptアプリでCarousel機能を実装

初めに

この記事は現在アプリ開発している際に、自身が使用したものに対しての備忘録用として記載します。

Carouselとは

Carouselとは以下画像のようにセットした枚数分を一枚ずつスライド式で表示するもの

イメージ画像（以下に記載するコードとは関係ありません）

ライブラリの使用

このCarousel機能を１から実装するととても手間がかかるので、用意されているライブラリを使用しました。

何個かあるのですが、自分はreact-material-ui-carouselを使用しました。
これを使用した理由はCSSを整えたい場合に簡単に変更が可能だからです。

もし、インポートしたCarouselをそのまま使用するのならreact-responsive-carouselがオススメです。

リンク先：
react-material-ui-carousel : https://www.npmjs.com/package/react-material-ui-carousel
react-responsive-carousel : https://www.npmjs.com/package/react-responsive-carousel

使い方

・インストール
npm install react-material-ui-carousel --save
・yarnの場合
yarn add react-material-ui-carousel

import Carousel from 'react-material-ui-carousel';

//省略

export default function test(){
  return(
     <>
       <Carousel>
          <div>test1</div>
          <div>test2</div>
          <div>test3</div>
       </Carousel>
     </>
  )
}

これだけで要素が3つのCarouselが完成です。

styleを変更したい場合

上記だけでもUIは自動的に整った形で表示されるのですが、高さやNextボタンの配置や色合いなどを変更したい場合は以下のように記載します。

import Carousel from 'react-material-ui-carousel';

//省略

export default function test(){
  return(
     <>
       <Carousel
        indicatorIconButtonProps={{
          style: {
              padding: '0 15px',
          }
        }}
        indicatorContainerProps={{
          style: {
            margin: "3px 0px 0px 0px"
          }
        }}
        navButtonsWrapperProps={{
          style: {
              marginTop: "55px",
          }
        }}
        navButtonsProps={{
          style: {
            color: "rgb(0,0,0,1)",
            background: "rgb(255,255,255,0)",
          }
        }}>
          <div>test1</div>
          <div>test2</div>
          <div>test3</div>
       </Carousel>
     </>
  )
}

どこがのスタイルが変更になるかは試しながら実装していっていただきたいですが、公式HPにあるstyleの変更Propsは以下となります。（漏れがあったらすみません）
・navButtonsWrapperProps
・navButtonsProps
・indicatorIconButtonProps
・activeIndicatorIconButtonProps
・indicatorContainerProps

最後に

拙い記事ではございますが、以上がCarousel機能のご紹介でした。
react-material-ui-carouselはCSSの変更以外にもオートプレイをtrue/falseにするなど、細かい機能がありますので、Carousel機能の実装を考えている方は是非色々試しながら使用してみてください。