[팀 프로젝트] Swiper로 Carousel 구현

상세 페이지에서 캐러셀로 이미지들을 보여주고 싶어서 직접 캐러셀을 만들까 생각하다가 라이브러리를 사용하기로 결정했다
캐러셀도 여러가지 라이브러리가 있었는데 최종적으로 Swiper를 사용했다.

처음에 react-slick 을 사용했는데 이미지가 렌더링되지 않는 이슈가 발생했다. 결국 원인을 못찾아서 다른 라이브러리인 swiper 를 사용해서 구현했다

export default function PostImage({ postImage }: PostImageProps) {
  const navigationButton = postImage.length > 1
  return (
    <div className="relative carousel-container md:h-[350px] md:w-[810px] w-[330px] h-[180px] border-2 rounded-xl md:mb-[5px]">
      <Swiper
        className='w-full h-full'
        modules={[Navigation, Pagination ,A11y]}
        spaceBetween={50}
        slidesPerView={1}
        loop = {true}
        navigation={navigationButton}
        pagination={{
          clickable : true,
          type : 'fraction',
        }}
      >
        {postImage.map((image, index) => (
          <SwiperSlide key={index}>
            <Image
              src={image}
              alt={`post_image_${index}`}
              className="w-full h-full object-cover rounded-xl"
              height={514}
              width={810}
              priority
            />
          </SwiperSlide>
        ))}
      </Swiper>
    </div>
  );
}

상세 페이지에서 보여질 포스트 이미지는 최소 1개 ~ 5개인데 이미지가 1개일 경우에는 슬라이드 버튼과 페이지 수가 보일 필요가 없어서 조건부 렌더링을 추가하여 구현했다

.swiper-button-next::after, .swiper-button-prev::after {
  background-color: #F5F6F7;
  font-size: 14px !important;
}
.swiper-button-next, .swiper-button-prev {
  background-color: #F5F6F7;
  position: absolute !important;
  top: auto !important;
  bottom: 5px !important; 
  width: 20px !important;
  height: 20px !important;
  /* border-radius: 25px !important; */
  color: #3B424A !important;
  line-height: 50px !important;
  text-align: center !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

div.swiper-pagination.swiper-pagination-fraction {
  background-color: #F5F6F7;
  font-size: 14px;
  width: 50px; 
  height: 20px; 
  position: absolute;
  bottom: 5px; 
  left: 277px; 
  transform: translateX(-50%);
  z-index: 10;
  color: #3B424A !important;
}

.swiper-button-next {
  background-color: #F5F6F7;
  border-radius:0 10px 10px 0 ;
  right: 12px !important; 
}

.swiper-button-prev {
  background-color: #F5F6F7;
  border-radius: 10px 0 0 10px;
  left: 240px !important;
}

그리고 디자이너분이 UI를 만들어 주신걸 참고해서 커스터 마이징했다
커스터 마이징을 할 때 너무 힘들었다. elements를 하나하나 찾아가면서 CSS를 적용시켜야 했기 때문에 시간이 오래 걸렸다

그리고 처음에 CSS 속성들이 적용이 안되고 있어서 권장되는 방법은 아니지만 !important 를 사용해서 강제로 적용시켰다.