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官网