Example of asNavFor

[pwnz22]

Hello guys!

Can someone provide an example of using asNavFor option? Thanks!

[josefarrugia]

I too am stuck on this. Any updates?

[pwnz22]

You need to npm install flickity-as-nav-for and import it

npm install flickity-as-nav-for
import 'flickity-as-nav-for'

[mortensassi]

How did you get it to work? Imported the plugin and set the option but it doesn't do anything

[mrKorg]

Hi, I have the same problem

[danimalweb]

I'd love to see an example of this too.

[diegood]

Example html:

<template>
  <div>
      <Flickity  ref="main" :options="mainImgOtions" class="carousel-main" style="height:20em">
            <b-card  v-for="(image, index) in product.images" :key="index" class="carousel-cel h-100 w-100">
              <b-img  :src="image" alt="Left image"></b-img>
            </b-card>
      </Flickity>
      <Flickity  ref="nav" :options="navImgOtions" class="carousel-nav" style="height:5em">
            <b-card  v-for="(image, index) in product.images" :key="index" class="carousel-cel h-100 w-25">
              <b-img  :src="image" alt="Left image"></b-img>
            </b-card>
      </Flickity>
  </div>
</template>

Example Script:

import Flickity from 'vue-flickity';
import 'flickity-as-nav-for'
export default {
  name: "DetailProductImgComponent",
  components: { Flickity },
  data() {
    return {
      imgVisible: 0,
      mainImgOtions: {
        initialIndex: 0,
        prevNextButtons: false,
        pageDots: false,
        wrapAround: false
      },
      navImgOtions: {
        asNavFor: '.carousel-main',
        freeScroll: false,
        contain: true,
        prevNextButtons: false,
        pageDots: false,
        wrapAround: true
      }
    }
  },
};