search

drewjbartlett / vue-flickity

A Vue Slider / Carousel Component for Flickity.js
http://drewjbartlett.com/demos/vue-flickity/
375 stars 56 forks source link

Carousel not displaying properly #44

Open sharjeel619 opened 5 years ago

sharjeel619 commented 5 years ago

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

mortensassi commented 5 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

sharjeel619 commented 5 years ago

@mortensassi Did it work for you ?

mortensassi commented 5 years ago

@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 commented 5 years ago

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