react中用swiper做轮播步骤

第一步:在cmd中引入

npm install --save swiper

第二步:

在页面上引入：

import Swiper from ‘swiper/dist/js/swiper.js’
import ‘swiper/dist/css/swiper.min.css’

第三步：在生命周期钩子函数componentDidMount()中写入轮播方法

componentDidMount(){
        var mySwiper = new Swiper('.swiper-container', {
            loop: true,//这里是自动轮播
            autoplay:{
                delay:1000 ,
                disableOnInteraction: false
            },
            pagination : {
                el:'.swiper-pagination',//这里是分页器设置
            }
        });
    }

第四步：在render中渲染dom

（1）如果数据是根据异步加载完成那么我们需要通过数组遍历：

render() {
    return (
        

            

                

                {
                    this.state.carouselr.map((item,index)=>{
                        return(
                                

                                    
                                
                        )
                    })
                }
        
        

            
        
        );
}

（2）如果是直接在render中渲染那么代码如下：

render() {
    return (
        

            

            

                
Slide 1
                
Slide 2
                
Slide 3
            
                

            
        
    );
}