반응형
보통 슬라이 더(또는 스와이퍼)를 구현할 때, 화면에 한 개의 슬라이드가 보이는 형태로 많이 구현합니다.
슬라이드를 넘기면, 다음 슬라이드가 나오는 형태입니다.
그런데, 요구사항이 화면에 여러 개의 슬라이드를 보여달라고 하면 어떻게 할까요?
예를 들어, 375px 사이즈의 모바일 화면에
200px 크기의 카드 형태를 하나는 다 보이도록, 하나는 일부만 보이도록 해줘야 합니다.
말이 잘 이해가 안되실 수도 있는데, 아래 그림과 같은 형태입니다.
위와 같이 Swiper에 옵션을 제공해서 인라인 형태의 슬라이드를 구현할 수 있습니다.
중요한 것은 styled 컴포넌트에 있는데요!
.swiper-slide 클래스 선택자에 width 값을 auto, !important를 적용해야 합니다.
그렇지 않으면, Swiper 옵션에 slidesPerView를 auto로 지정해도, 슬라이드들이 인라인 형태로 적용되지 않습니다.
적용을 잘 해주면, 다음과 같이 슬라이드들이 인라인 형태로 구현이 됩니다 :)
반응형
'React' 카테고리의 다른 글
| [React] 컴포넌트를 어떻게 잘 구현할 수 있을까? (0) | 2023.07.29 |
|---|---|
| [React] 리액트 컴포넌트 최적화해보기 (with. useCallback, React.memo) (0) | 2023.06.22 |
| [React] React-Query 기본 사용법 정리 (useQuery, useMutation) (0) | 2023.01.20 |
| [React] React-Query 상태(Status) & StaleTime, CacheTime 정리 (0) | 2023.01.18 |
| [React] React-Query를 이용해서 페이지네이션 구현하기 (0) | 2022.11.27 |
