如何在 Swiper React 轮播内悬停时暂停 Swiper 分页项目符号进度条动画

如何解决如何在 Swiper React 轮播内悬停时暂停 Swiper 分页项目符号进度条动画

对于我的轮播，我在 React 应用程序中使用了 Swiper js。

我正在使用来自 Swiper 核心的 autoplay 和 pauSEOnMouseEnter，以在悬停轮播时暂停自动播放。这按预期工作。

autoplay={{
 delay: 3000,disableOnInteraction: false,pauSEOnMouseEnter: true,}}

我还为分页项目符号创建了进度条。使用来自 Swiper 核心的 watchSlidesProgress。使用一些自定义 css 也可以正常工作。

唯一缺少的是，当用户将鼠标悬停在轮播上时，它会暂停幻灯片。但是我如何管理它同时在悬停轮播时暂停进度条动画？

这是我目前所拥有的 working sandbox。

解决方法

您必须使用 props onSwiper 初始化 swiper。 您可以通过编写以下内容来设置 ref：

const [swiper,setSwiper] = useState<SwiperCore | null>(null);
const carouselSettings = {
    ref: swiper,autoplay: {},}
<Swiper {...carouselSettings} onSwiper={setSwiper}>

所以在那之后，您将准备好swiper并且您将能够使用swiper.autoplay等