[TOC]
1. 安装 swiper
NPM install swiper --save
2. 在轮播组件里引入 swiper
- // 引入此路径, 才不会打包失败
- import Swiper from 'swiper/dist/js/swiper.js';
- // 引入样式, 还可以加上自己的样式
- import 'swiper/dist/CSS/swiper.min.css';
3. 在组件挂在完毕的时候, 生成 Swiper 对象
- componentDidMount(){
- // 可以加上你需要的条件等, 然后生成 Swiper 对象,
- // 一定要检查是不是每次都生成了 Swiper 对象, 否则可能出现不滑动的情况和别的情况等
- new Swiper('.swiper-container',{
- loop: true, // 循环模式选项
- // 如果需要分页器
- pagination: {
- el: '.swiper-pagination',
- },
- // 如果需要前进后退按钮
- navigation: {
- nextEl: '.swiper-button-next',
- prevEl: '.swiper-button-prev',
- },
- // 如果需要滚动条
- scrollbar: {
- el: '.swiper-scrollbar',
- },
- observer:true,// 修改 swiper 自己或子元素时, 自动初始化 swiper
- observeParents:true,// 修改 swiper 的父元素时, 自动初始化 swiper
- });
- }
4. 在 render 的时候, 按照官方文档的结构来写
- render(){
- return(
- <div class="swiper-container">
- <div class="swiper-wrapper">
- <div class="swiper-slide">Slide 1</div>
- <div class="swiper-slide">Slide 2</div>
- <div class="swiper-slide">Slide 3</div>
- </div>
如果需要分页器 -->
<div class="swiper-pagination"></div>
如果需要导航按钮 -->
- <div class="swiper-button-prev"></div>
- <div class="swiper-button-next"></div>
如果需要滚动条 -->
- <div class="swiper-scrollbar">
- </div>
- </div>
- )
- }
5. 参考文档
swiper4.x 官方文档
来源: http://www.jianshu.com/p/655f3146d3b9