Swiperjs с событиями в React

Question

Есть ли способ привязать событие к экземпляру swiperjs в реакции? Я пробовал использовать метод ниже, но он не распознает событие on для slideChange.

import React, { useEffect, useRef } from 'react';
import Swiper from 'swiper';

const Slider = () => {
  const swiperReference = useRef(null);

  const params = {
    on: {
      slideChange: () => {
        console.log('swiper change');
      },
    },
  };

  useEffect(() => {
    swiperReference.current = new Swiper('.swiper-container', params);
  }, []);

  return (

<div class="swiper-container">
    <div class="swiper-wrapper">
        <!-- Slides -->
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
    </div>
    <div class="swiper-pagination"></div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
</div>
  );
};

export default Slider;

Answer 1

Вы можете получить событие Swiper onSlideChange способом React, используя реквизит onSlideChange, например так:

Нет необходимости создавать экземпляр Swiper в хуке useEffect. Вам нужно только вызвать компонент Swiper в вашем шаблоне JSX следующим образом:

            <Swiper
          className={"my-slider"}
          loop={true}
          onSlideChange={(swiperCore) => {
            const {
              activeIndex,
              snapIndex,
              previousIndex,
              realIndex,
            } = swiperCore;
            console.log({ activeIndex, snapIndex, previousIndex, realIndex });
        }}