React에서 SwiperJS 스타일링하기

간편하게 드래그 가능한 캐러셀을 구현해주는 SwiperJS 라이브러리를 사용하던 중, 화면 이동 시에 활용하는 요소, 그리고 화면 위치 파악에 활용하는 요소들을 변경할 필요가 생겼다.

1. 간단하게 요소의 색상이나 크기만을 변경하기

Swiper 컴포넌트를 만들 때 style 속성에 지정을 해주면 된다.

(어떤 속성이 있는지는 https://swiperjs.com/swiper-api#pagination-css-custom-properties 에서 보라색 글자들을 참고하면 된다. 상단 내비게이션바에 가려진 요소가 있으므로 위쪽으로 조금 스크롤해서 보는 것을 추천)

<Swiper
  navigation={true}
  pagination={true}
  modules={[Navigation, Pagination]}
  width={100}
  style={{
    "--swiper-pagination-color": "#990000",
    "--swiper-navigation-color": "#55EE00",
  }}
>
  {[1, 2, 3, 4, 5, 6].map((elem, itr) => (
    <SwiperSlide key={`item_${itr + 1}`}>
      <p className="w-[150px] h-[150px] bg-emerald-400 rounded-full flex flex-col justify-center">
        <span>{itr}</span>
      </p>
    </SwiperSlide>
  ))}
</Swiper>

pagination bullet의 색이 #990000이 되었고, navigation 홑화살괄호의 색이 #55EE00이 되었다.

1-2. 복수의 Swiper에 스타일링하기

복수의 Swiper에서 같은 스타일을 쓰는데 굳이 style 요소를 일일이 넣어줄 필요는 없다.
이럴 때는 css파일을 만들어서 클래스 셀렉터로 관리하는 게 더 편리할 것이다.

.helloworld .swiper-pagination-bullet-active {
  --swiper-pagination-color: #00aa00;
}

굳이 css파일을 따로 만들어서 클래스로 관리하는 이유는 아래와 같다.

1) helloworld 클래스 이외의 일반 Swiper에는 해당 그림이 나오지 않게 하기 위해서
2) helloworld를 공유하는 클래스 요소들끼리는 해당 그림이 나오게 하고 싶어서

따라서 Swiper 하나에서 독점적으로 활용하고 싶다면 className 대신 id를 넣어서 써도 무방하다. 하지만 파일 하나에 기록하므로 관리가 더 편할 수 있다.

2. 버튼을 이미지로 교체하고 싶을 때

여러 가지 방법이 있겠지만, 내가 찾아낸 방법은 1-2와 같이, css 파일을 만들어서 이전,다음 버튼을 수식하는 것이다.

.helloworld .swiper-button-next {
  background: url("../components/MainPage/images/next.svg");
  width: 40px;
  height: 40px;
  right: 72px;
  background-size: cover;
  background-position: center;
  cursor: default;
}

.helloworld .swiper-button-prev {
  background: url("../components/MainPage/images/next.svg");
  transform: rotate(180deg);
  width: 40px;
  height: 40px;
  left: 72px;
  background-size: cover;
  background-position: center;
  cursor: default;
}

코드 적용 시 아래와 같이 이전, 다음 버튼이 내가 만든 커스텀 이미지로 대체된 것을 확인할 수 있다.