vue-awesome-swiper swiper1跟2不能同步

ithelp vue.js vue.cli swiper

mlwb804 2021-02-03 02:36:25 ‧ 2672 瀏覽

分享至

各位前輩好
我使用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"

想請問各位前輩該怎麼寫才能正常使用
爬了很多文都找不到問題希望能給小弟一點指點

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

1 則留言

cuxy6705

iT邦新手 5 級 ‧ 2021-02-03 15:12:55

我之前有用過你可試試看這樣
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
    })
}