堆叠轮播图---react pc端

效果图,自动轮播加左右箭头




注意:es6引本地图片的方式有两种

【1】import banner from ‘图片路径’

【2】

先安装  cnpm i [email protected] -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

               

           

        })

        return (

           

               

                  {$bannerimg}

               

               

               

                   

                   

               

           

        )

    }

}

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;

    }

}

你可能感兴趣的:(堆叠轮播图---react pc端)