当 swiperjs 因交互而停止或因鼠标事件暂停时如何分离 - ReactJS

如何解决当 swiperjs 因交互而停止或因鼠标事件暂停时如何分离 - ReactJS

当 swiperjs 被交互或鼠标事件停止时，我需要以某种方式分开。 我在 disableOnInteraction 有 true。
预期行为：

• 自动播放滑动器
• 鼠标进入时暂停自动播放
• 在鼠标离开时继续自动播放，之前不会因交互而停止
• 在某些交互中停止自动播放 -> 停止自动播放后，鼠标事件不再起作用

问题：

• 鼠标输入或交互停止滑动时无法分离

我的代码：

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

const handleMouseEnter = () => {
    swiper?.autoplay.stop();
};

const handleMouseLeave = () => {
    // there should be some if condition to recognize that 
    // swiper was stopped by interaction on paused by handleMouseEnter
    swiper?.autoplay.start();
};

<Box 
  onMouseEnter={handleMouseEnter}
  onMouseLeave={handleMouseLeave}
>
  <Swiper {...carouselSettings} onSwiper={setSwiper}>
     .
     .
     .
  </Swiper>
</Box>

当前行为：

• 鼠标进入时停止自动播放
• 鼠标离开时继续自动播放
• 在 swiper 被交互停止后，它会在鼠标离开时开始自动播放（这不是我想要的）