Open sharjeel619 opened 6 years ago
having the same problem, i guess it has to do with flickity firing up before images are fully loaded
EDIT: Check this closed issue: https://github.com/drewjbartlett/vue-flickity/issues/8#issuecomment-403712706
@mortensassi Did it work for you ?
@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()
}
},
@mortensassi Thanks Man, That really did it for me!
Slide Images are appearing on top of each other when used with Vue.js