1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Last updated at Posted at 2021-08-16

初めに

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

Carouselとは

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

イメージ画像(以下に記載するコードとは関係ありません)
image.png

ライブラリの使用

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

何個かあるのですが、自分は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機能の実装を考えている方は是非色々試しながら使用してみてください。

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?