react swiper@6.x 工作中遇到的问题处理

react swiper@6.x 问题处理

由于这个版本比较低，所以网上直接搜到的swiper的使用方法都不适用此版本，故对我工作中遇到的此版本问题做一总结，愿遇到同样问题的朋友少走远路：

1、react swiper@6.x的使用方法：

（1）安装：

	npm install swiper@6.8.4

（2）使用

import { Swiper, SwiperSlide } from 'swiper/react';import 'swiper/swiper-bundle.css';import SwiperCore, { Autoplay, Navigation, Pagination, A11y } from 'swiper';SwiperCore.use([Autoplay, Navigation, Pagination, A11y]);<Swiper// 你可以通过autoplay的其他选项来控制自动播放的行为autoplay={{delay: 5000,disableOnInteraction: false,pauseOnMouseEnter: true,}}allowTouchMove={true}loop={true}// 自定义前进后退按钮的图标navigation={{nextEl: '.swiper-button-next',prevEl: '.swiper-button-prev',}}// 在CSS中定义前进后退按钮的样式和图标className="my-swiper"pagination={{ clickable: true }}onSlideChange={() => console.log('slide change')}onSwiper={(swiper) => console.log(swiper)}><SwiperSlide><div style={{ height: 200 }}>Slide 1</div></SwiperSlide><SwiperSlide><div style={{ height: 200 }}>Slide 2</div></SwiperSlide><SwiperSlide><div style={{ height: 200 }}>Slide 3</div></SwiperSlide><SwiperSlide><div style={{ height: 200 }}>Slide 4</div></SwiperSlide>{/* 前进按钮 */}<div className="swiper-button-next" />{/* 后退按钮 */}<div className="swiper-button-prev" /></Swiper>

2、react swiper@6.x配置自动轮播，且开启移入停止的配置

 		autoplay={{delay: 5000,disableOnInteraction: false,// 鼠标移入停止自动播放pauseOnMouseEnter: true,}}``