1. 安装 Swiper
npm install --save swiper
2. 编写 Swiper 组件
- 首先引入 Swiper 以及样式
// 引入此路径,才不会打包失败
import Swiper from 'swiper/dist/js/swiper.js'
import 'swiper/dist/css/swiper.min.css'
- 在组件挂载完毕的时候生成 Swiper 对象
componentDidMount () {
var mySwiper = new Swiper('.swiper-container', {
autoplay: true,
loop: true,
pagination : {
el: '.swiper-pagination',
}
});
}
2 . 在 React 的 render 方法构造 html 结构
render() {
return (
<div className="App">
<div className="swiper-container">
<div className="swiper-wrapper">
<div className="swiper-slide">Slide 1</div>
<div className="swiper-slide">Slide 2</div>
<div className="swiper-slide">Slide 3</div>
</div>
<div className='swiper-pagination'></div>
</div>
</div>
);
}
}
这样就可以了