VueFlux

Description

It is a default component to display a pagination of the images, good when it does not contain too many images.

Component

The component can have the following attributes.

Attribute	Type	Required	Description
slider	Object	false	The VueFlux component

Example of pagination inside vue-flux

<vue-flux :options="fluxOptions" :images="fluxImages" :transitions="fluxTransitions">
    <flux-pagination slot="pagination"></flux-pagination>
</vue-flux>

import { VueFlux, FluxPagination, Transitions } from 'vue-flux';

export default {
   components: {
      VueFlux,
      FluxPagination
   },

   data: () => ({
      fluxOptions: {
         autoplay: true
      },
      fluxImages: [ 'URL1', 'URL2', 'URL3' ],
      fluxTransitions: Transitions
   })
}

Example of pagination outside vue-flux

<vue-flux
   :options="fluxOptions"
   :images="fluxImages"
   :transitions="fluxTransitions"
   ref="slider">
</vue-flux>

<flux-pagination v-if="mounted" :slider="$refs.slider"></flux-pagination>

import { VueFlux, FluxPagination, Transitions } from 'vue-flux';

export default {
   components: {
      VueFlux,
      FluxPagination
   },

   data: () => ({
      mounted: false,
      fluxOptions: {
         autoplay: true
      },
      fluxImages: [ 'URL1', 'URL2', 'URL3' ],
      fluxTransitions: Transitions
   }),

   mounted() {
      this.mounted = true;
   }
}