先安装 cnpm i swiper -S
代码如下：
import React, { Component } from 'react'
import Swiper from 'swiper/dist/js/swiper.js'; //cnpm i swiper -S 安装
import 'swiper/dist/css/swiper.min.css';
import '../css/swiper/swiper.css';
export default class componentName extends Component {
constructor(props){
super(props);
this.state={
arr:['../imgs/pharah1.jpg','../imgs/pharah2.jpg','../imgs/tracer1.jpg','../imgs/tracer2.jpg','../imgs/angle.jpg','../imgs/winston.jpg']
}
}
componentDidMount(){
var thumbsSwiper=new Swiper('.thumbs-swiper',{ //实例化导航的图片
spaceBetween: 10, //导航图的间隔
slidesPerView: 4, //底部显示几张导航图
watchSlidesVisibility: true,/*避免出现bug*/
})
var mySwiper = new Swiper ('.swiper-container', {
spaceBetween: 10,
thumbs: {
swiper: thumbsSwiper,
}
})
}
render() {
let {arr}=this.state;
let slides=arr.map((item,index)=>{
return <div className="swiper-slide" key={index} >
<img src={item} alt=""/>
</div>
})
return (
<div className='swiper' >
<div className="swiper-container">
<div className="swiper-wrapper">
{slides}
</div>
</div>
<div className="thumbs-swiper">
<div className="swiper-wrapper">
{slides}
</div>
</div>
</div>
)
}
}
css样式如下：
.swiper {
width: 960px;
margin: 0 auto;
}
img {
display: block;
}
.thumbs-swiper {
overflow: hidden;
}
.thumbs-swiper .swiper-slide img {
width: 100%;
}
