react框架中使用swiper

前提

• 掌握react基础
• 使用swiper轮播插件的经验

react+swiper使用流程

• react项目中下载swiper插件 npm install swiper -S
• react组件中引入 swiper

    import Swiper from 'swiper'
    import 'swiper/css/swiper.css'

• react组件中生成html三层嵌套结构

    <div className='swiper-container'>
        <div className='swiper-wrapper'>
            <div className='swiper-slide'>1</div>
            <div className='swiper-slide'>2</div>
            <div className='swiper-slide'>3</div>
        </div>
        {/* 分页器结构 */}
        <div className='swiper-pagination'></div>
    </div>

• reatc组件的生命周期中实例化swiper

    // 在合适的生命周期函数中实例化 Swiper
    componentDidMount(){
        // 实例化
        new Swiper('.swiper-container',{
                autoplay: true,
                loop: true,
                pagination:{
                    el:'.swiper-pagination'
                }
        })
    }

swiper官网地址：https://www.swiper.com.cn/api…

补充：更多轮播效果配置请参考swiper官网