React 中使用 swiper 插件

安装 Swiper
npm install --save swiper

编写 Swiper 组件

1，首先引入 Swiper 以及样式

// 引入此路径，才不会打包失败
import Swiper from 'swiper/dist/js/swiper.js'
import 'swiper/dist/css/swiper.min.css'

2，在组件挂载完毕的时候生成 Swiper 对象

componentDidMount(){
        new Swiper('.swiper-container', {
            loop: true,     //循环
            autoplay:{      //自动播放，注意：直接给autoplay:true的话，在点击之后不能再自动播放了
                delay: 2500,
                disableOnInteraction: false,    //户操作swiper之后，是否禁止autoplay。默认为true：停止。
            },
            pagination: {
                el: '.swiper-pagination',
                clickable: true,    // 允许点击跳转
            },
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
        });
    }

render() {
        const bannerImg = this.props.bannerImg;
        return (
       

           

                {bannerImg.map((item,index)=>(
                   

                ))}
           

           

           

    // swiper-button-warp是自己加的，为了让按钮居中对齐
               

               

           

       

        )
    }