Carousel 라이브러리 ‐ Swiper 활용 방법

라이브러리 선택 - Swiper

Carousel 라이브러리 종류는 굉장히 많지만 최근에도 업데이트가 활발한 Swiper 라이브러리를 선택해서 사용했습니다.

커스텀한 이미지 슬라이더 컴포넌트

• 메인페이지의 Banner 영역, 상세정보페이지의 이미지 영역에서 사용합니다.
• 스타일링을 위해 따로 Slider 폴더 내에 css파일을 작성했습니다.
• 특정 기능에 대한 설명을 밑 코드에서 주석으로 작성했습니다.
• 모바일에서 터치로 이동하거나 웹에서 마우스로 이미지 이동 모두 가능합니다.

/**
 * @param {ImageData} 이미지 아이디, 이미지 url을 담은 데이터
 * @param {imageAspectRatio} swiper 크기 지정을 위한 변수
 */
const Slider = ({ imageData, imageAspectRatio }: SliderProps) => {
  SwiperCore.use([Pagination, Autoplay])
  return (
    <Swiper
      loop={true} // 슬라이드 반복 여부
      pagination={{ clickable: true }} // bullet 모양의 페이지네이션 사용 -> bullet 클릭시 이동
      className={`aspect-${imageAspectRatio}`}
      autoplay={{ // 자동 슬라이드 시간
        delay: 5000,
        disableOnInteraction: false, // 사용자가 상호작용을 하고있을 경우에는 자동 슬라이드 기능이 작동하지 않습니다
      }}
    >
      {imageData.map((v) => (
        <SwiperSlide key={v._id}>
          <Image
            width={0}
            height={0}
            alt="sliderImage"
            src={v.image}
            sizes="100vw"
            style={{ width: '100%' }}
          />
        </SwiperSlide>
      ))}
    </Swiper>
  )
}

export default Slider

슬라이더를 사용하는 방법

메인페이지에서의 이미지 슬라이더

• 상세페이지와 달리 배너 영역의 경우 요소의 크기를 비율대로 조정할 필요가 없기 때문에 'auto'를 넣어주면 됩니다.

<Slider imageData={bannerArr} imageAspectRatio="auto" />

상세페이지에서의 이미지 슬라이더

• 이미지 슬라이더 영역을 1:1 정사각형의 크기로 보여줘야 하기 때문에 imageAspectRatio에 'square'를 넣어줘야 합니다.

<Slider imageData={images} imageAspectRatio="square" />