react 中使用Swiper 6.3.3 自动滚屏，鼠标悬停

安装swiper

npm i swiper --save

引入插件及样式

import SwiperCore, {Autoplay} from 'swiper';
import {Swiper, SwiperSlide} from 'swiper/react';
import 'swiper/swiper.scss';
import Index from './index.tsx';
import List from './list.tsx';

SwiperCore.use ([Autoplay]);
export default class SwiperPage extends React.Component{
  render(){
    return(
      <Swiper
        initialSlide={0}   //初始化时的索引位置
        speed={3000} //页面切换速度，slider自动滑动开始到结束的时间（单位ms）
        loop={true} //是否形成环路
        spaceBetween={0} //页面直接的间距
        slidesPerView={1} //设置slider容器能够同时显示的slides数量(carousel模式)。
      //自动滚屏
        autoplay={{
          delay: 30000, //自动滚屏速度
          disableOnInteraction: false,  //false: 鼠标操作屏幕后继续自动滚屏
        }}
        onSwiper={
          (swiper)=>{
            //鼠标悬浮暂停效果
            swiper.$el[0].addEventListener('mouseover',()=>swiper.autoplay.stop());
            //鼠标移开后继续自动滚屏效果
            swiper.$el[0].addEventListener('mouseleave',()=>swiper.autoplay.start());
          }
        }
      >
        <SwiperSlide>
          <Index/>
        </SwiperSlide>
        <SwiperSlide>
          <List/>
        </SwiperSlide>
      </Swiper>
    )
  }
}

参考文档: https://swiperjs.com/react/