처음에

이 기사는 현재 앱 개발중에 자신이 사용한 것에 대한 비망록용으로 기재합니다.

Carousel이란?

Carousel이란 이하 화상과 같이 세트한 매수분을 한 장씩 슬라이드식으로 표시하는 것

이미지 이미지(아래에 기재된 코드와는 관련이 없습니다)

라이브러리 사용

이 Carousel 기능을 1부터 구현하면 매우 번거롭기 때문에, 준비되어 있는 라이브러리를 사용했습니다.

몇 가지가 있지만 자신은 react-material-ui-carousel을 사용했습니다.
이것을 사용한 이유는 CSS를 정돈하고 싶은 경우에 간단하게 변경이 가능하기 때문입니다.

가져온 Carousel을 그대로 사용한다면 react-responsive-carousel을 추천합니다.

링크 대상:
react-material-ui-carousel : htps //w w. 음 pmjs. 코 m / Pac 카게 / Rea ct - Tetea l - 우이 - 카로세 l
react-responsive-carousel : htps //w w. 음 pmjs. 코 m / Pac 가게 / Rea ct-re s Ponshi ぇ- 카로세

사용법

· 설치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이 완성입니다.

스타일을 변경하려는 경우

위에서만 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 기능의 구현을 생각하고 있는 분은 꼭 여러가지 시험하면서 사용해 보세요.