asNavFor doesn't work

[nicobevilacqua]

I've tried to implement the example for asNavFor with two carousels and I've not had luck with that. The asNavFor property is always null.

Any clue about that? There is something I've missed?

My code is as simple as I could:

<template>
  <div>
    <div>
      <VueSlickCarousel ref="c1" :asNavFor="$refs.c2" :focusOnSelect="true">
        <div v-for="(item, index) in items" :key="index">
          <h1>{{item}}</h1>
        </div>
      </VueSlickCarousel>
    </div>
    <div>
      <VueSlickCarousel ref="c2" :asNavFor="$refs.c1" :focusOnSelect="true">
        <div v-for="(item, index) in items" :key="index">
          <h1>{{item}}</h1>
        </div>
      </VueSlickCarousel>
    </div>
  </div>
</template>

<script>
import VueSlickCarousel from "vue-slick-carousel";
import "vue-slick-carousel/dist/vue-slick-carousel.css";

export default {
  data: () => ({
    items: [1, 2, 3, 4, 5]
  }),
  components: {
    VueSlickCarousel
  }
};
</script>

Here is an online example:

https://codesandbox.io/s/morning-https-pf89m?file=/src/components/CarouselExample.vue

[gaetansenn]

Look's like we have the same problem !

[nicobevilacqua]

@gaetansenn I've found a solution today. It looks like the problem is that the $refs property isn't reactive. So, on certain circumstances I could't figure out, the $refs are null and the VueSlickCarousel asNavFor property will be always null because there isn't a reactive update. The solution I've found is create two props on my component, use them as the asNavFor properties on the carousels and update them on the mounted callback with the $refs content. It's not an ideal solution but is enough for me now.

A working example:

<template>
  <div>
    <div>
      <VueSlickCarousel ref="c1" :asNavFor="c2" :focusOnSelect="true">
        <div v-for="(item, index) in items" :key="index">
          <h1>{{item}}</h1>
        </div>
      </VueSlickCarousel>
    </div>
    <div>
      <VueSlickCarousel ref="c2" :asNavFor="c1" :focusOnSelect="true">
        <div v-for="(item, index) in items" :key="index">
          <h1>{{item}}</h1>
        </div>
      </VueSlickCarousel>
    </div>
  </div>
</template>

<script>
import VueSlickCarousel from "vue-slick-carousel";
import "vue-slick-carousel/dist/vue-slick-carousel.css";

export default {
  data: () => ({
    items: [1, 2, 3, 4, 5],
    c1: undefined,
    c2: undefined,
  }),
  mounted() {
    this.c1 = this.$refs.c1;
    this.c2 = this.$refs.c2;
  },
  components: {
    VueSlickCarousel
  }
};
</script>

[gaetansenn]

Hello,

Thanks for you reply. I image you are using nuxt ? $refs will never be available until hydratation is done. I assume this is a SSR problem

[nicobevilacqua]

No, I've tried on a fresh only Vue project and I've had the same problem. Here are an online editor with the documentation example and It doesn't work neither.

https://codesandbox.io/s/morning-https-pf89m?file=/src/components/CarouselExample.vue

[mustafaeranil]

The problem was solved for me when I added classes "slider-for" "slider-nav"

[ig1na]

The problem was solved for me when I added classes "slider-for" "slider-nav"

May you elaborate ? You just put slider-for and slider-nav as classes for the slick components ?

[andrewmasat]

I was still having problems with the possible fix above but after some tinkering I think I have this working reliability by adding v-show="c1" in the second carousel.

Full example:

<VueSlickCarousel ref="c2" :asNavFor="c1" :focusOnSelect="true" v-show="c1">
    <div v-for="(item, index) in items" :key="index">
        <h1>{{item}}</h1>
    </div>
</VueSlickCarousel>

[kgrosvenor]

Not working for me either, in nuxt, the refs are null.

[rttmax]

@nicobevilacqua 's solution is working for me. I just had to assign c1 and c2 in nextTick to make it work in both directions:

mounted() {
  this.$nextTick(() => {
    this.c1 = this.$refs.c1
    this.c2 = this.$refs.c2
  })
}

[hafiz-azeem-capslock]

Its working for me when i have added setTimeout FN in Nuxt.js

  data() {
   return {
      c1: undefined,
      c2: undefined,
  }
}

 mounted() {
   this.carouselWait()
  },

methods: {
    carouselWait(){
      setTimeout( () => {
        this.c1 = this.$refs.c1;
        this.c2 = this.$refs.c2;
      }, 3000);
    },
}