Fade option not working

[nxic]

Tried to use fade option from flickity v2.2 it doesn't work.

in template

<flickity
  class="carousel"
  ref="carousel"
  :options="flickityOption"
>
  <div
    class="carousel-cell carousel-slide"
    v-for="(item, i) in slides"
    :key="`product-slide-${i}`"
  >
    <img class="" :src="item.image" alt="">
    <img class="" :src="item.desc" alt="">
  </div>
</flickity>

in script

export default {
  name: 'carousel',
  data() {
    return {
      flickityOption: {
        fade: true,
      },
      slides: [
        {
          image: 'https://picsum.photos/944/775/?image=52',
          desc: 'https://picsum.photos/944/775/?image=53',
        },
        {
          image: 'https://picsum.photos/944/775/?image=54',
          desc: 'https://picsum.photos/944/775/?image=55',
        },
        {
          image: 'https://picsum.photos/944/775/?image=56',
          desc: 'https://picsum.photos/944/775/?image=57',
        },
        {
          image: 'https://picsum.photos/944/775/?image=58',
          desc: 'https://picsum.photos/944/775/?image=59',
        },
        {
          image: 'https://picsum.photos/944/775/?image=60',
          desc: 'https://picsum.photos/944/775/?image=61',
        },
        {
          image: 'https://picsum.photos/944/775/?image=62',
          desc: 'https://picsum.photos/944/775/?image=63'
        },
      ]
    }
  },
  mounted() {
    this.$nextTick(async () => {
      await this.sleep(1500);
      const instance = this.$refs.carousel;
      instance.rerender();
      instance.reloadCells();
    });
  },
  methods: {
    next() { this.$refscarousel.next(); },
    prev() { this.$refs.carousel.previous(); },
  },
}

[nxic]

created pull request #67

[antiden]

Hello,

Example for nuxtjs

1. install yarn add flickity-fade -D
2. connect depending in plugins/flickity.js

   
   import Vue from 'vue'
   import Flickity from 'vue-flickity'
   import "flickity-fade";

Flickity.beforeDestroy = undefined; Vue.component('flickity', Flickity)

3. Use with option: `fade: true,`

Ready.

[defaye]

Flickity.beforeDestroy = undefined

Why do you have the beforeDestroy set to undefined?

[antiden]

To disable the hook persistently without worrying about changes from package updates or npm clean installs, the beforeDestroy method can be set to undefined when defining the plugin.