如何在 swiper.js 中移动到幻灯片并做出反应

Question

我在我的 React 应用程序中使用swiper.js库。我想使用 slipTo 方法形成 swiper API，但我不知道该怎么做。

从 swiper 网站链接到不工作的演示

我的代码

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

Answer 1

代替

swiperRef.current.slideTo(0);

和

swiperRef.current.swiper.slideTo(0);

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

Answer 2

1. Swiper组件添加onSwiper

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

2. 从滑动器添加状态

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

3. 调用这部分代码

  swiper.slideTo(0, 500); // pass speed as a second parameter