react框架中使用swiper

54次阅读

共计 630 个字符，预计需要花费 2 分钟才能阅读完成。

掌握 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'}
        })
    }