AsNavigationFor does not work !!!

[GeorgeFlorian]

I have the following two carousels:

      <div class="portfolio-slider">
        <VueSlickCarousel ref="c1" :asNavFor="$refs.c2" v-bind="settings1">

        <div class="slide slide1">1</div>
        <div class="slide slide2">2</div>
        <div class="slide slide3">3</div>
        <div class="slide slide4">4</div>
        <div class="slide slide5">5</div>
        </VueSlickCarousel>
        <button>View All</button>
      </div>
    </div>

    <div class="portfolio-lower">
      <VueSlickCarousel ref="c2" :asNavFor="$refs.c1" v-bind="settings2">
        <div class="slide slide1">1</div>
        <div class="slide slide2">2</div>
        <div class="slide slide3">3</div>
        <div class="slide slide4">4</div>
        <div class="slide slide5">5</div>
      </VueSlickCarousel>
    </div>

with these settings:

      settings1: {
        centerMode: true,
        centerPadding: "15px",
        focusOnSelect: true,
        infinite: true,
        slidesToShow: 3,
        slidesToScroll: 1,
        swipeToSlide: true,
        speed: 400,
      },
      settings2: {
        slidesToShow: 1,
        swipeToSlide: true,
        infinite: true,
        speed: 400,
        arrows: false,
        fade: true,
        lazyLoad: "ondemand",
      },

The second carousel DOES NOT MOVE when I move the first.

I've even tried the most basic example with the settings from the example and it still doesn't work:

    <div class="portfolio-lower">
      <VueSlickCarousel ref="c1" :asNavFor="$refs.c2" :focusOnSelect="true">
        <div><h3>1</h3></div>
        <div><h3>2</h3></div>
        <div><h3>3</h3></div>
        <div><h3>4</h3></div>
        /*...*/
      </VueSlickCarousel>
      <VueSlickCarousel
        ref="c2"
        :asNavFor="$refs.c1"
        :slidesToShow="4"
        :focusOnSelect="true"
      >
        <div><h3>1</h3></div>
        <div><h3>2</h3></div>
        <div><h3>3</h3></div>
        <div><h3>4</h3></div>
        <div><h3>5</h3></div>
        /*...*/
      </VueSlickCarousel>
    </div>

I think it's a bug.

[dannylinden]

Same here. Any workaround / fix or idea? I have no clue where to start. No Console errors 🤔

[dannylinden]

A workaround after I found our it works in Dev mode correct after hot reload when I changed any kind of paramter. It triggers a rendering on mounted:

<VueSlickCarousel
                ref="testimonials_menu"
                :arrows="false" 
                :asNavFor="$refs.testslides"
                :slidesToShow="show">
//...
 export default {
    //....
    data: () => ({
        show: 1
    }),
    mounted() {
        this.show = 4
    }
  }

[seimsg]

A workaround fix, that does work, of creating 2 data elements to feed to the asNavFor props on both carousels was posted on this closed issue: https://github.com/gs-shop/vue-slick-carousel/issues/141 One thing to note though (that I ran into) is if you're using the v-bind approach for the carousel settings, setting .asNavFor in that settings object doesn't appear to work. I had to just leave .asNavFor out of my settings object and add the asNavFor prop following that separate prop technique outlined in that fix.

[danielmoralesc]

Hi, this solution work for me.

https://github.com/staskjs/vue-slick/issues/68#issuecomment-661284731