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