堆叠轮播图---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;

    }

}