初めに
この記事は現在アプリ開発している際に、自身が使用したものに対しての備忘録用として記載します。
Carouselとは
Carouselとは以下画像のようにセットした枚数分を一枚ずつスライド式で表示するもの
ライブラリの使用
この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機能の実装を考えている方は是非色々試しながら使用してみてください。