[TIL] Carousel 구현

아니 마크다운 js 붙이면 되는 거 나만 몰랐나요...

---

캐로셀, 슬라이드라고 불리는 것 구현하기

const StCarouselContent = styled.div`
  width: 360px;
  height: 750px;
  position: absolute;
  top: 0;
  right: calc(${props=>props.positionX}%);
  transition: 1s;
  display: flex;
`

슬라이드 되어야 하는 컴포넌츠는 position: absolute 로 만든 후에 display: flex를 주면 보여져야 가로정렬된다. 전체 레이아웃에는 overflow: hidden을 줘서 화면 밖에 있어야 하는 컴포넌츠는 숨겼다.

정렬된 부분을 조건에 맞추어 왼쪽으로 움직여주면 캐로셀 완성

 // StCarouselContent 위치 값
  const [positionX, setPositionX] = useState(0);

  const carouselHandler = () => {
    if(positionX===300) {
      return
    }
    setPositionX(positionX+100)
  }

  const dots = [0,100,200,300]

positionX는 0에서 시작되어 100% 200% 300% 400% 로 이동한다. 트랜지션은 1s로 주었다.

 {
   dots.map((dot, i)=>{
     return(
       <StCarouselDot key={i}
            className={dot === positionX ? "active" : null}
    	/>
    )
   })
}

dots는 캐로셀이 돌아갈 때 순서를 보여줄 수 있는 인디케이터인데, positionX의 값과 일치할 경우 className이 활성화 되도록 했다.