보통 슬라이 더(또는 스와이퍼)를 구현할 때, 화면에 한 개의 슬라이드가 보이는 형태로 많이 구현합니다. 슬라이드를 넘기면, 다음 슬라이드가 나오는 형태입니다. 그런데, 요구사항이 화면에 여러 개의 슬라이드를 보여달라고 하면 어떻게 할까요? 예를 들어, 375px 사이즈의 모바일 화면에 200px 크기의 카드 형태를 하나는 다 보이도록, 하나는 일부만 보이도록 해줘야 합니다. 말이 잘 이해가 안되실 수도 있는데, 아래 그림과 같은 형태입니다. 위와 같이 Swiper에 옵션을 제공해서 인라인 형태의 슬라이드를 구현할 수 있습니다. 중요한 것은 styled 컴포넌트에 있는데요! .swiper-slide 클래스 선택자에 width 값을 auto, !important를 적용해야 합니다. 그렇지 않으면, Swi..
