相关疑难解决方法(0)

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

我正在使用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”)

reactjs next.js swiper.js

15
推荐指数
2
解决办法
2万
查看次数

标签 统计

next.js ×1

reactjs ×1

swiper.js ×1