如何在 Swiper 实例之外使用 useSwiper？

Question

我正在使用 Swiper for React 来放映一些幻灯片。

我一直无法使用外部按钮在幻灯片（上一张和下一张）之间导航。

Swiper 有一个 useSwiper hook，可以提供对其 Swiper 实例 API 的编程访问。但是没用。

这是我的代码：

import { useSwiper } from 'swiper/react';

//more code

const swiper = useSwiper();

//more code

<Swiper
    modules={[Navigation, Pagination, Scrollbar, A11y]}
    navigation
    spaceBetween={20}
    slidesPerView={1}
>
    <button onClick={() => swiper.slideNext()}>Slide</button>
    {
        ads.map(ad => <SwiperSlide>
            slider explanation
        </SwiperSlide>
    )}
</Swiper>

当我点击按钮时，我收到这个错误：

TypeError: Cannot read properties of null (reading 'slideNext')

Answer 1

useSwiper 必须由组件在内 Swiper 元素使用。

所以像下面这样

import { useSwiper } from "swiper/react";

const SwiperButtonNext = ({ children }) => {
  const swiper = useSwiper();
  return <button onClick={() => swiper.slideNext()}>{children}</button>;
};

然后在 Swiper

中使用它

<Swiper
  modules={[Navigation, Pagination, Scrollbar, A11y]}
  navigation
  spaceBetween={20}
  slidesPerView={1}
>
  <SwiperButtonNext>Slide</SwiperButtonNext>
  {ads.map((ad) => (
    <SwiperSlide>slider explanation</SwiperSlide>
  ))}
</Swiper>;

这是因为 Swiper 创建了一个上下文，而 useSwiper 挂钩试图使用该上下文，因此需要从上下文提供程序的子项中调用它。

如何在 Swiper 实例之外使用 useSwiper？

How to use useSwiper outside a Swiper instance?

reactjs

next.js

swiper