各位前輩好
我使用vue-awesome-swiper 3.1.3 vue-cli3
最近想使用第一層是大圖 第二層小圖 點選小圖可以同步出現在大圖的功能
程式碼的部分完全使用官方提供的範例
https://github.com/surmon-china/surmon-china.github.io/blob/source/projects/vue-awesome-swiper/examples/30-thumbs-gallery.vue
不過都沒辦法同步展現
而且會報錯
Error in nextTick: "TypeError: Cannot read property 'controller' of undefined"
想請問各位前輩該怎麼寫才能正常使用
爬了很多文都找不到問題 希望能給小弟一點指點
我之前有用過你可試試看這樣
html
<swiper class="swiperTop" :options="swiperOptionTop" ref="swiperTop">
<swiper-slide v-for="(item,index) in dataList" :key="index">
<div class="swiper-slide">
<img :src="item" alt="">
</div>
</swiper-slide>
<div class="swiper-button-prev slide-one-button-prev" slot="button-prev"></div>
<div class="swiper-button-next slide-one-button-next" slot="button-next"></div>
</swiper>
<swiper class="swiper gallery-thumbs" :options="swiperOptionThumbs" ref="swiperThumbs">
<swiper-slide v-for="(item,index) in dataList" :key="index">
<img :src="item" alt="">
</swiper-slide>
</swiper>
script
swiperOptionTop: {
spaceBetween: 10,
slidesPerView:1,
navigation: {
nextEl: '.slide-one-button-next',
prevEl: '.slide-one-button-prev'
},
thumbs:{
swiper: {
el:'.gallery-thumbs',
slidesPerView: 3,
watchSlidesVisibility: true
}
}
},
swiperOptionThumbs: {
spaceBetween: 10,
slidesPerView: 3,
touchRatio: 0.2,
slideToClickedSlide: true
}
mounted() {
this.$nextTick(() => {
const swiperTop = this.$refs.swiperTop.$swiper
const swiperThumbs = this.$refs.swiperThumbs.$swiper
swiperThumbs.controller.control = swiperTop
swiperTop.controller.control = swiperThumbs
})
}