小编Dre*_*cho的帖子

我正在尝试通过构建一个具有自动播放功能的简单图像滑块来学习 swiper.js，但我不知道如何在MouseEnter 上停止自动播放并在MouseLeave 上启动它。我尝试了 onMouseLeave={Swiper.autoplay.stop} 但没有成功。

import React from 'react';
import classes from './HeroSlider.module.css';
import { Swiper, SwiperSlide } from 'swiper/react';
import SwiperCore, { Navigation, Pagination, Autoplay } from 'swiper';
import 'swiper/swiper-bundle.css'; // swiper.min.css
import image1 from '../../Images/image1.png';
import image2 from '../../Images/image2.png';
import image3 from '../../../Images/image3.png';

SwiperCore.use([ Navigation, Pagination, Autoplay ]);

const HeroSlider = () => {
  return (
    <Swiper 
      className={ classes.MainSlider }
      autoplay={{ delay: 5000, disableOnInteraction: false, reverseDirection: true, waitForTransition: true }}
      pagination={{ clickable: true }}
      navigation
      onMouseEnter={}
      onMouseLeave={} …