1. 安装
- npm install --save swiper
2. 引入
import Swiper from 'swiper/dist/js/swiper.min.js'
import 'swiper/dist/css/swiper.min.css'
注意!如果使用Swiper4.x版本,引入Swiper的js文件时,不要使用 import Swiper from ‘swiper’ 的方式,这样会导致打包失败。
注: 不要使用 的引入方式,,
一开始build出问题时(Unexpected token: name …”)一直找不出原因,网上查到的解决办法有回退到 Swiper3.x 版本,但3.x版本与现在使用的版本有部分属性不兼容,改动较为麻烦。
3. 使用
HTML
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">slider1</div>
<div class="swiper-slide">slider2</div>
<div class="swiper-slide">slider3</div>
</div>
</div>
JS
componentDidMount() {
this.initSwiper();
}
initSwiper() {
this.mySwiper = new Swiper('.swiper-container', {
observer: true, // 当改变swiper的样式(例如隐藏/显示)或者修改swiper的子元素时,自动初始化swiper
observeSlideChildren: true, // 子slide更新时,swiper更新
loop: true, // 在原本slide前后复制若干个slide,让Swiper看起来是循环的
direction: 'vertical',
slidesPerGroup: 4, // slides 分组展示与滑动
slidesPerView: 4,
simulateTouch: false, // 禁止鼠标模拟
autoplay: {
delay: 5000, // 停留时间
},
speed: 1000, // 滑动速度
});
}
5. 销毁Swiper
mySwiper.destroy(deleteInstance, cleanupStyles)
参数名 | 类型 | 是否必填 | 描述 |
---|---|---|---|
deleteInstance | boolean | 可选 | 设为false则不销毁Swiper对象,默认为true |
cleanupStyles | boolean | 可选 | 设为true则清除所有swiper设定选项和样式,比如direction等,默认为false |