Hello guys! Can someone provide an example of using asNavFor option?

You need to npm install flickity-as-nav-for and import it <div class="snippet-clip

Example html: <div class="highlight highlight-text-html-basic notranslate position

Example of asNavFor about vue-flickity HOT 6 CLOSED

drewjbartlett commented on August 16, 2024

Example of asNavFor

from vue-flickity.

Comments (6)

pwnz22 commented on August 16, 2024 1

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

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

from vue-flickity.

josefarrugia commented on August 16, 2024

I too am stuck on this. Any updates?

from vue-flickity.

mortensassi commented on August 16, 2024

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

from vue-flickity.

mrKorg commented on August 16, 2024

Hi, I have the same problem

from vue-flickity.

danimalweb commented on August 16, 2024

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

from vue-flickity.

diegood commented on August 16, 2024

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
      }
    }
  },
};