React 中使用 swiper 插件

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/FireBird_one/article/details/82688545

安装 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 (
        <div className="swiper-container">
            <div className="swiper-wrapper">
                {bannerImg.map((item,index)=>(
                    <div key={index} className="swiper-slide" style={{backgroundImage:`url(${item})`}}></div>
                ))}
            </div>
            <div className='swiper-pagination'></div>
            <div className='swiper-button-warp'>    // swiper-button-warp是自己加的，为了让按钮居中对齐
                <div className="swiper-button-next"></div>
                <div className="swiper-button-prev"></div>
            </div>
        </div>
        )
    }