iT邦幫忙

0

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

  • 分享至 

  • xImage
  •  

各位前輩好
我使用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 }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
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
    })
}

我要留言

立即登入留言