Swiperjs 与 React 中的事件

Question

有没有办法在react中使用swiperjs的实例附加一个事件？我尝试使用下面的方法，但它无法识别slideChange的on事件。

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

您可以使用 onSlideChange 属性以 React 方式获取 Swiper onSlideChange 事件，如下所示：

无需在 useEffect 挂钩中实例化 Swiper。您只需在 JSX 模板中调用 Swiper 组件，如下所示：

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