Carousel not displaying properly

[sharjeel619]

Slide Images are appearing on top of each other when used with Vue.js

[mortensassi]

having the same problem, i guess it has to do with flickity firing up before images are fully loaded

EDIT: Check this closed issue: #8 (comment)

[sharjeel619]

@mortensassi Did it work for you ?

[mortensassi]

@sharjeel619 yeah it did - i implemented it like mentioned in the comment:

<flickity class="slider slider--galery" :class="{'slider--galery-visible' : showGalery}" ref="flickity" v-images-loaded="imgsLoaded" :options="flickityOptions">
      <img v-for="image in galery" :key="image.ID" class="slider__image" :src="image.url" alt="">
</flickity>

methods: {
    imgsLoaded () {
      let flickityInstance = this.$refs.flickity
      flickityInstance.reloadCells()
    },

    show () {
      const viewer = this.$el.querySelector('.galery-images').$viewer
      viewer.show()
    }
  },

[sharjeel619]

@mortensassi Thanks Man, That really did it for me!