react-image-swiper
这是一个基于react的轮播组件github地址
代码示例
cd example
npm install
npm start
组件的使用
npm i --save react-image-swiper
import Swiper from "react-image-swiper"
.
.
.
const options = {
showPot: true, //是否显示下方pot 默认为true
timeGap: 3000 //时间间隔 默认3000
autoplay: true //默认为true
};
.
.
.
<Swiper options={options}>
{
this.state.slideArr.map((item,index) => {
return <div className="slider-item" key={index}>
<img src={item.img} />
</div>
})
}
<div className="slider-item" key={"34234"}>
<video
autoPlay
src={"http://1254107296.vod2.myqcloud.com/27e1f7ecvodtransgzp1254107296/4b1060e95285890780486612122/v.f40.mp4"} loop="true"
preload=""
muted=""
width="1280"
height="720" ></video>
</div>
</Swiper>
- 轮播列表的每一项要设置类名 slider-item
- 组件源码在根目录src下