今天新做的一个项目需要用到swiper,所以引入了swiper 6,发现了一些坑,在这里记录一下……
提示:vue2.X引入swiper最高支持到@^6.4.5版本~
1、引入css文件时报错文件不存在
// import style (>= Swiper 6.x)
import 'swiper/swiper-bundle.css'
// import style (<= Swiper 5.x)
import 'swiper/css/swiper.css'
2、左右按钮点击无效
解决方法:需要给按钮绑定事件,如下:
<div class="swiper-container" ref="mySwiper" :options="swiperOptions">
<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-button-prev" @click="prev"></div>
<div class="swiper-button-next" @click="next"></div>
</div>
<script>
import Swiper from 'swiper';
import 'swiper/swiper-bundle.min.css'
export default {
data() {
return {
swiperOptions: {
loop: false,
slidesPerView : 4,
spaceBetween: 53,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
}
}
},
methods: {
prev() {
this.$refs.mySwiper.swiper.slidePrev();
},
next() {
this.$refs.mySwiper.swiper.slideNext();
}
}
}
</script>
重要补充
2021-04-09补充一个很重要的点,踩了一个大坑~
刚刚做项目npm install swiper,发现swiper更新到@^6.5.5版本了,然后照常引入使用,以为发现可以成功,but发现自己太天真了,警告了好多°(°ˊДˋ°) °……
立马找到官网,才发现最上面有一句话,大意了°(°ˊДˋ°) °……
只支持vue3.0,但是vue3.0放弃兼容IE11了,本公司还是有很多“老”用户的,非IE不可,so只能用支持vue2x的版本了,然后找到原来项目使用的版本号@^6.4.5,这样就可以啦 (u‿ฺu✿ฺ)
参考网站:
swiper官网API: https://www.swiper.com.cn/api/index.html.
swiper在Vue中使用GitHub:https://github.com/surmon-china/vue-awesome-swiper
在Vue中使用swiper6:https://swiperjs.com/vue#installation