Swipper contoller thumb in loop ( async )

i have template

<swiper :options="swiperOptionTop" class="gallery-top" ref="swiperTop">
                <swiper-slide v-for="(slide,index) in swiperSlides" :key="index" :class="'slide-' + slide.id">
                  <img alt="" :src="slide.img">
                </swiper-slide>
               <div class="swiper-button-next swiper-button-white" slot="button-next"></div>
               <div class="swiper-button-prev swiper-button-white" slot="button-prev"></div>
             </swiper>
             <!-- swiper2 Thumbs -->
             <swiper :options="swiperOptionThumbs" class="gallery-thumbs" ref="swiperThumbs">
               <swiper-slide v-for="(slide,index) in swiperSlides" :key="index" :class="'slide-' + slide.id">
                 <img alt="" :src="slide.img">
               </swiper-slide>
             </swiper>

and script

  data () {
    return {
      swiperOptionTop: {
        spaceBetween: 10,
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev'
        }
      },
      swiperOptionThumbs: {
        spaceBetween: 10,
        centeredSlides: false,
        slidesPerView: 'auto',
        touchRatio: 0.2,
        slideToClickedSlide: true
      },
      swiperSlides: [
        {id: 1, img: '/static/images/products/product_01.jpg'},
        {id: 2, img: '/static/images/products/product_02.jpg'},
        {id: 3, img: '/static/images/products/product_03.jpg'}
      ],
      swiperSlidesThumb: [
        {id: 1, img: '/static/images/products/product_01.jpg'},
        {id: 2, img: '/static/images/products/product_02.jpg'},
        {id: 3, img: '/static/images/products/product_03.jpg'}
      ]
    }
  },
  mounted () {
    this.$nextTick(() => {
      const swiperTop = this.$refs.swiperTop.swiper
      const swiperThumbs = this.$refs.swiperThumbs.swiper
      swiperTop.controller.control = swiperThumbs
      swiperThumbs.controller.control = swiperTop
    })
  }

the thumbnail not controller main slider.

[voltane]

I can confirm its not working. controller does not exist on $swiper. Adding it manually also does not work. Trying fallback to solution from swiper below v4, and using params.control also does not work. I’m using latest versions:

• “vue-awesome-swiper”: “4.1.1”
• “swiper”: “6.3.4”

My temporary workaround is to use slideChange event on thumbnail instance like this: @slideChange="onThumbnailChange"

where onThumbnailChange function looks like this:

onThumbnailChange(val) {
    this.$refs.swiperTop.$swiper.slideTo(val.activeIndex)
},

I’m using activeIndex instead of realIndex because in my case i set loop parameter to true (for reason why, check note here: https://swiperjs.com/api/#events and search for mySwiper.activeIndex).

In my case it works fine. Hope it helps till proper fix.

[thomaslecoeur]

A bit late, but the solution for you guys is here 👍

To access the Swiper instance, donc forget the $ before swiper : this.$refs.swiperTop.$swiper instead of this.$refs.swiperTop.swiper