Swiper Event(React)

Swiper 가 움직일 때마다 이벤트를 부여하고 싶다.
공식문서를 참고하면 된다.

이벤트 감지 방법

1. onSlideChange={() => console.log('slide change')}
2. onSwiper={(swiper) => console.log(swiper)}

코드

아래와 같이

    <Swiper
      id="introSwiper"
      className="mySwiper"

      // 이벤트 함수 위치
	  onSlideChange={() => console.log("slide change")}
      onSwiper={(swiper) => console.log(swiper)
      
      modules={[EffectCoverflow, Navigation]}
      effect={"coverflow"}
      navigation={true}
      grabCursor={true}
      centeredSlides={true}
      loop={true}
      slidesPerView={2.4}
      // slideToClickedSlide={true}
      coverflowEffect={{
        rotate: 10,
        stretch: 10,
        depth: 100,
        modifier: 3,
        slideShadows: true,
      }}

      style={{
        width: "86%",
        paddingTop: "50px",
        paddingBottom: "50px",
      }}
    >
      <SwiperSlide>
      </SwiperSlide>
</Swiper>

이벤트를 작성해주면 된다.

그럼 콘솔창에서 위와같이 확인할 수 있다.

참고

공식문서 : https://swiperjs.com/react
Usage 부분을 보면 된다 !