乐趣区

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 官网
退出移动版