❗️Swiper 모듈 사용 시 modules 설정 필수!

swiper/react를 사용할 때, 내부 기능이 정상 동작하지 않는다면 modules 설정을 확인해볼 것!

예를 들어 navigation 기능을 사용할 경우

.swiper-button-disabled 클래스가 비활성화 버튼에 자동으로 붙어야 하는데 아무 반응이 없다면 modules에 Navigation 모듈을 추가하지 않은 것이 원인이 될 수 있습니다.

<Swiper
  loop
  slidesPerView={4.5}
  spaceBetween={8}
  slidesPerGroup={1}
  navigation={{
    nextEl: '.swiper-landing-button-next',
    prevEl: '.swiper-landing-button-prev',
  }}
  // 👇 이 부분이 없으면 Navigation 기능이 동작하지 않음!
  modules={[Navigation]}
  onSwiper={(swiper: SwiperClass) => (swiperEl.current = swiper)}
  onSlideChange={(swiper: SwiperClass) =>
    setCurrentIndex(swiper.realIndex)
  }
>
  {props.children}

  <ArrowButton
    className="swiper-landing-button-prev left-0"
    onClick={() => swiperEl.current?.slidePrev()}
  />
  <ArrowButton
    className="swiper-landing-button-next right-0 rotate-180"
    onClick={() => swiperEl.current?.slideNext()}
  />
</Swiper>

 

✅ 핵심 포인트

Swiper 내부 기능 (navigation, pagination, autoplay 등)을 사용할 땐 반드시 해당 기능을 modules에 명시적으로 등록해야 합니다.

그렇지 않으면 Swiper는 해당 기능을 아예 인식하지 못해 관련 스타일이나 동작도 적용되지 않습니다.