堆叠轮播图---react pc端
效果图，自动轮播加左右箭头
注意：es6引本地图片的方式有两种
【1】import banner from ‘图片路径’
【2】<img src={require('图片路径')} />
先安装 cnpm i swiper@4.1.6 -S
代码如下：
组件代码
import React,{Component} from 'react';
import '../swiper/swiper-4.1.6.min.css';
import '../css/banner.css';
import banner1 from '../img/1.jpg'
import banner2 from '../img/2.jpg'
import banner3 from '../img/3.jpg'
import Swiper from 'swiper';
class Banner extends Component{
constructor(props){
super(props)
this.state={
bannerImg:[banner1,banner2,banner3,banner2,banner2,banner3,banner2]
}
}
componentDidMount(){
this.swiper=new Swiper('.banner',{
watchSlidesProgress: true,
loopedSlides: 7,
autoplay:{
delay:1000
},
loop:true,
pagination:{
el:'.page',
clickable:true
},
navigation:{
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
on: {
progress: function(progress) {
for (let i = 0; i < this.slides.length; i++) {
console.log(this.slides)
console.log(this.slides.length)
var slide = this.slides.eq(i);
var slideProgress = this.slides[i].progress;
if (Math.abs(slideProgress) > 1) {
var modify = (Math.abs(slideProgress) - 1) * 0.4 + 1;
}
let translate = slideProgress * modify *950 + 'px';
let scale = 1 - Math.abs(slideProgress) / 5;
let zIndex = 999 - Math.abs(Math.round(10 * slideProgress));
slide.transform('translateX(' + translate + ') scale(' + scale + ')');
slide.css('zIndex', zIndex);
slide.css('opacity', 1);
if (Math.abs(slideProgress) > 3) {
slide.css('opacity', 0);
}
}
},
setTransition: function(transition) {
for (var i = 0; i < this.slides.length; i++) {
var slide = this.slides.eq(i)
slide.transition(transition);
}
}
}
})
}
render(){
let {bannerImg}=this.state;
let $bannerimg=bannerImg&&bannerImg.map((v,i)=>{
return <div key={i} className='swiper-slide'>
<img src={v} alt=""/>
</div>
})
return (
<div className='banner swiper-container'>
<div className='swiper-wrapper wrap'>
{$bannerimg}
</div>
<div className='page swiper-pagination'></div>
<div className='btn'>
<div className='swiper-button-prev'></div>
<div className='swiper-button-next'></div>
</div>
</div>
)
}
}
export default Banner;
sacc代码：
banner.scss
*{
margin:0;
padding:0;
list-style: none;
}
html,body{
width:100%;
height:100%;
}
.banner{
width:100%;
height:100%;
}
.swiper-slide{
width:100%;
text-align: center;
margin:0 auto;
img{
text-align: center;
margin:0 auto;
width:80%;
height:600px;
display: block;
}
}
