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

【问题标题】：How pause Swiper pagination bullets progress bar animation on hover inside Swiper React carousel如何在 Swiper React 轮播中悬停时暂停 Swiper 分页项目符号进度条动画
【发布时间】：2021-06-05 10:01:42
【问题描述】：

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

我正在使用来自 Swiper 核心的 autoplay 和 pauseOnMouseEnter，在悬停旋转木马时暂停自动播放。这按预期工作。

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

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

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

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

【问题讨论】：

标签： css reactjs progress-bar swiper swiperjs

【解决方案1】：

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

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

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

【讨论】：