引入正确的版本
npm install swiper@^5 vue-awesome-swiper@^4 --save
参考图片
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
data() {
return {
swiperOptionTop: {
loopedSlides: 2, // looped slides should be the same
spaceBetween: 10,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev'
}
},
swiperOptionThumbs: {
// loop: true,
// loopedSlides: 2, // looped slides should be the same
spaceBetween: 10,
centeredSlides: true,
slidesPerView: 'auto',
touchRatio: 0.2,
slideToClickedSlide: true
}
}
components: {
Swiper,
SwiperSlide,
},
mounted() {
this.$nextTick(() => {
//核心代码
const swiperTop = this.$refs.swiperTop.$el.swiper
const swiperThumbs = this.$refs.swiperThumbs.$el.swiper
console.log(this.$refs)
swiperTop.controller.control = swiperThumbs
swiperThumbs.controller.control = swiperTop
})
},
( 完整代码后期上传)
安装异常请先卸载swiper
npm uninstall swiper
或清除配置文件node_modules