在react中使用swiper6

下载swiper插件

npm install swiper-s

引入swiper组件

// 导入基本swipe组件
import { Swiper, SwiperSlide } from 'swiper/react';
// 导入自动播放和分页器模块
import SwiperCore,{Pagination,Autoplay} from 'swiper';
// 导入swiper组件样式
import 'swiper/swiper.scss';
//如果当先项目导入scss文件报错，请百度搜索react项目引入scss文件，然后下载对应插件即可引入
// 导入分页器组件样式
import 'swiper/components/pagination/pagination.scss';

挂载到当前swiper实例

// 挂载到当前swiper实例
SwiperCore.use([Pagination,Autoplay]);

在react，渲染函数中返回组件

 <Swiper
        slidesPerView={1} //同屏显示多少个swiper滑块
        initialSlide={1} //默认展示第几个滑块
        loop={true} //是否开启无限轮播
        pagination={{ clickable: true }} //开启分页器操作
        observer={true} //修改swiper自己或子元素时，自动初始化swiper(如果数据是请求下来的一定要重新初始化)
        observeParents={true} //修改swiper的父元素时，自动初始化swiper(如果数据是请求下来的一定要重新初始化)
        autoplay={true} //自动轮播开启
        >
{this.state.banner.map((item,index)=><SwiperSlide key={index}><img alt="1" src={item.imageUrl} className="swiper_img"></img></SwiperSlide>)}
</Swiper>