react使用轮播图swiper

步骤

1. 安装npm i swiper -S

2. 在index.html里加入

<link rel="stylesheet" href="" target="_blank">https://unpkg.com/swiper@8/swiper-bundle.min.css">

3. 文件引入

import { Swiper, SwiperSlide } from 'swiper/react'

import { Navigation, Autoplay, Pagination } from 'swiper'

4.

<RViewerJS

className="fwfg"

options={{

className: "RViewerJS-container-1",

}}

>

<SwiperStyle>

<Swiper

spaceBetween={50} // 间距

modules={[Autoplay, Navigation, Pagination]}

autoplay={{ delay: 3000 }}

// navigation // 是左右两边的箭头

loop

pagination={{ clickable: true }}

>

{

data.rows?.map(item => (

<SwiperSlide key={item.id}>

<ImgStyle key={item.id}>

<img key={item.id} width={"100%"} height={200} src={item.image} />

<div>{moment(item?.captureTime)?.format("YYYY年MM月DD日HH时MM分")?.slice(11)}</div>

</ImgStyle>

</SwiperSlide>

))

}

</Swiper>

</SwiperStyle>

</RViewerJS>