Request: support for imagesLoaded option

[kevinzweerink]

Flickity's imagesLoaded option allows automatic re-rendering of the slideshow once images have fully loaded, but requires the explicit inclusion of flickity-imagesloaded, which is not currently part of this package.

As things are now, you can approximate this behavior by manually importing imagesloaded and binding it to flickity's ready event through flickityOptions like so:

<template>
  <Flickity :options='flickityOptions' ref='flickity'>
    <div v-for='image, i in images' :key='image._id'/>
      <img :src='image.url'/>
    </div>
  </Flickity> 
</template>

<script>
import imagesLoaded from 'imagesloaded';

export default {
  name: 'Slideshow',
  props: {
    images: Array
  },
  methods: {
    loadComplete () {
      if (this.$refs.flickity) {
        this.$refs.flickity.reloadCells();
      }
    }
  },
  data() {
    return {
      flickityOptions: {
        prevNextButtons: false,
        pageDots: false,
        on: {
          ready: () => { imagesLoaded(this.$refs.flickity, this.loadComplete) }
        }
      }
    }
  }
}
</script>

But it would much nicer to be able just do this and clean up the ref:

<template>
  <Flickity :options='flickityOptions'>
    <div v-for='image, i in images' :key='image._id'/>
      <img :src='image.url'/>
    </div>
  </Flickity> 
</template>

<script>
export default {
  name: 'Slideshow',
  props: {
    images: Array
  },
  data() {
    return {
      flickityOptions: {
        prevNextButtons: false,
        pageDots: false,
        imagesLoaded: true
      }
    }
  },
}
</script>

[MRloll]

This is really helpful. thank you so much.

[FDuschicka]

works like a charm! thank you for saving me after 4hrs without progress