[React] 리액트 이미지 슬라이드(Carousel) 만들기 - React Material UI Carousel

 

 

● React Material UI Carousel 설치하기

1. 이 라이브러리/구성 요소를 사용하려면 Material UI를 설치해야함

npm install @mui/material
npm install @mui/icons-material
npm install @mui/styles

 

 

 

2. carousel를 다운받기

npm install react-material-ui-carousel --save

 

반응형

 

 

● React Material UI Carousel 사용하기

1. import 하기

import Carousel from 'react-material-ui-carousel'
import { Paper, Button } from '@mui/material'

 

2. 사용하고 싶은 곳에 적용하기

<Carousel>
 { 보여주고자 하는 내용 }  //이 부분에 넘겨 보여주고자 하는 내용을 구현
</Carousel>

 

3. Carousel tag는 Page 태그를 기준으로 여러 내용을 넘겨 보여주게 된다

<Carousel> 
  <Paper> 1 </Paper>
  <Paper> 2 </Paper>
</Carousel>

 

4. 반복되는 요소는 map function을 사용해도 됨

<div className="slideImg">         
     <Carousel className="imgList">           
         {slide.map((item,i)=>(               
               <Paper className="mainImg" key={item.id}><img src={item.imgAddress} alt="" /> </Paper>       
         ))}         
     </Carousel>       
</div>

 

 

● Carousel의 기타 옵션

navButtonsProps : 슬라이더를 넘기는 버튼을 커스터 마이징 
NextIcon : 다음 슬라이더로 넘어가는 버튼을 다른 이미지로 교체
IndicatorIcon : 아래 나타나는 인디케이터를 커스터 마이징
autoPlay : 사용자가 눌러야 슬라이더가 넘어가게 설정

 

 

● 라이브러리 사이트 참고

https://www.npmjs.com/package/react-material-ui-carousel

react-material-ui-carousel