Vue-awesome-swiper: Swipper contoller thumb in loop ( async )

[dudenk]

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.

[sebastianjung]

Lol i was looking for a solution for making synced sliders work and your post actually helped me.
So thanks for that!

This worked for me (using typescript so you may not need "as any"):

const leftSlider = this.$refs.leftSlider as any;
const rightSlider = this.$refs.rightSlider as any;
leftSlider.swiper.controller.control = rightSlider.swiper;
rightSlider.swiper.controller.control = leftSlider.swiper;

Hope this helps!

[GiboMac]

@sebbler1337 have you an example? :D

[sebastianjung]

im on vacation right now and do not have any codeing stuff with me so unfortunately no.

[bocanhcam]

same issue !!!

[GarethSomers]

For anyone looking at this example wraps something like @sebastianjung suggested in the mounted() method.

[carmineprince]

updated () {
    if (this.isInit === 1) {
      this.$nextTick(() => {
        const swiperTop = this.$refs.swiperTop.swiper
        const swiperThumbs = this.$refs.swiperThumbs.swiper
        swiperTop.controller.control = swiperThumbs
        swiperThumbs.controller.control = swiperTop
      })
      this.isInit = 0
    }
  },

[horshechnyk]

same issue !!!

[saices]

Any solution how to fix this ?

[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

[ErwinCode]

I'm still getting this TypeError:

TypeError: Cannot set property 'control' of undefined.

With $ before swiper I can log the instance but I can't find the controller..

[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.

[awkoy]

Hi everyone! I found a solution:

computed: {
  swiperTop() {
    return this.$refs.swiperTop.$swiper;
  },
  swiperThumbs() {
    return this.$refs.swiperThumbs.$swiper;
  },
},
mounted() {
  this.swiperTop.controller.control = this.swiperThumbs
  this.swiperThumbs.controller.control = this.swiperTop
},

[AndrewBogdanovTSS]

Using mounted is not ideal for this. You should first initialize thumbs swiper, subscribe to it's init event which will give you access to a swiper instance which you should pass to a second swiper you want to control