사용자가 총 4개까지의 화면을 공유할 수 있는데 현재 어떤 화면을 공유하고 있는지 대략적인 지표와 특정 비디오를 지울 수 있는 기능이 있다. 이를 css로 간단하게 표현을 했었는데 swiper 홈페이지에 카드 형식으로 돼있는 것이 있어서 저 기능을 쓰면 card effect를 표현할 수 있을것이라 생각하여 바로 도입하였다.

물론 코드 example을 보면서 어느 방식으로 사용하는가를 약간 봤지만 별 무리없이 사용할 수 있을 것 같아서 바로 install하여 적용을 하였다.

사용방법

간단하게 Swiper와 SwiperSlide 컴포넌트를 가져와서 가져다 붙이고 원하는 pagination , navigation등은 module을 통해서가져와야 한다. import만 제대로 한다면 이부분에 대해서는 문제가 되질 않는다. 그리고 css또한 import를 적절히 해줘야 한다.

import "swiper/css";
import "swiper/css/effect-cards";
import "swiper/css/navigation";
import "swiper/css/pagination";
import {
  EffectCards,
  Mousewheel,
  Navigation,
  Pagination,
} from "swiper/modules";
import { Swiper, SwiperSlide } from "swiper/react";

Swiper를 감싸고 그 안에 요소들을 swiperslice로 감싸면 된다. 그리고 원하는 기능을 Swiper의 모듈에 넣어주면 설정 끝이다.

<Swiper
  effect={"cards"}
  grabCursor={true}
  mousewheel={true}
  pagination={{
    clickable: true,
  }}
  hashNavigation={{
    watchState: true,
  }}
  modules={[EffectCards, Pagination, Navigation, Mousewheel]}
  >
  {producers.map((producer, index) => (
    <SwiperSlide key={producer.id}>
      <ShareMediaItem nickname={nickname} videoSource={producer} />
      <StRemoveProducerButton onClick={() => handleShareStop(producer)}>
        x
      </StRemoveProducerButton>
    </SwiperSlide>
  ))}
</Swiper>

이렇게 하고 나서 추가적인 css를 조절을 해서 커스텀을 해줄 수 있었는데 Swiper를 감싸는 스타일 컴포넌트를 하나 만든 뒤에 .swiper라는 이름으로 클래스를 통해 커스텀을 해줄 수 있다. pagination 같은 경우에는 이름이 다르니 직접 DOM에 들어가서 생성되는 이름으로 커스텀해줄 수 있다.

const StSwiperVideoWrapper = styled(StVideoWrapper)`
  .swiper-pagination-bullet {
    background-color: ${(props) => props.theme.color.bg.secondary};
    opacity: 1;
  }
  .swiper-pagination-bullet-active {
    background-color: ${(props) => props.theme.color.bg.interactive.primary};
  }
`;

결론

빠른 시간안에 원하는 동작을 수행할 수 있어서 매우 만족스럽게 느낀 라이브러리이다. 저 기능을 CSS와 함께 하려고 했으면 남은 시간이 얼마남지 않은 지금 시점에서는 무리가 있었을텐데 라이브러리가 항상 안좋다는 내 인식을 깨게 해준 좋은 경험이었다.

참조

스와이퍼 공식 문서