如何在 swiper.js 中滑动并做出反应答案

【问题标题】：How to move to slide in swiper.js and react如何在 swiper.js 中滑动并做出反应
【发布时间】：2021-05-24 10:02:29
【问题描述】：

我在我的反应应用程序中使用swiper.js 库。我想使用 slideTo 方法表单 swiper API，但我不知道该怎么做。

Link to not working demo from swiper website

我的代码

const swiperRef = useRef(null)
useEffect(() => {
  //...some logic
  //if() {
    swiperRef.current.slideTo(0);
  //}
}

return(
  <Swiper pagination={true} navigation={true} ref={swiperRef}>
)

TypeError: swiperRef.current.slideTo is not a function

【问题讨论】：

标签： reactjs swiperjs

【解决方案1】：

替换

swiperRef.current.slideTo(0);

与

swiperRef.current.swiper.slideTo(0);

swiperRef.current只是引用了不包含js函数slideTo()的HTML元素。

【讨论】：

【解决方案2】：

将 onSwiper 添加到 Swiper 组件

<Swiper
  pagination={true}
  navigation={true}
  onSwiper={(swiper) => setSwiper(swiper)}
>

从 swiper 添加状态

  const [swiper, setSwiper] = useState<Swiper>();

调用这部分代码

  swiper.slideTo(0)

【讨论】：