我正在使用Swiper for React来显示一些幻灯片。
我一直坚持使用外部按钮在幻灯片(上一张和下一张)之间导航。
Swiper 有一个useSwiper 钩子,可以提供对其 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>
Run Code Online (Sandbox Code Playgroud)
当我单击该按钮时,我收到此错误:
类型错误:无法读取 null 的属性(读取“slideNext”)