FluxControls

Warning

I am using here the latest 2.6 vue syntax for slots, but if your Vue version is older check Named-Slots to see how slots are used in previous versions.

Description

The included component to display controls with the buttons previous, next, play and pause.

Attributes

slider

Is the VueFlux instance component from which to read the captions.

If you place this complement as a direct child in the VueFlux component you don't need to pass this attribute.

Type: VueFlux
Required: false

Example of controls inside vue-flux

<vue-flux
   :options="vfOptions"
   :images="vfImages"
   :transitions="vfTransitions">

   <template v-slot:controls>
      <flux-controls />
   </template>
</vue-flux>

import {
   VueFlux,
   FluxControls
} from 'vue-flux';

export default {
   components: {
      VueFlux,
      FluxControls,
   },

   data: () => ({
      vfOptions: {
         autoplay: true
      },
      vfImages: [ 'URL1', 'URL2', 'URL3' ],
      vfTransitions: [ 'fade', 'slide' ],
   }),
}

Example of controls outside vue-flux

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

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

import {
   VueFlux,
   FluxControls,
} from 'vue-flux';

export default {
   components: {
      VueFlux,
      FluxControls,
   },

   data: () => ({
      mounted: false,
      vfOptions: {
         autoplay: true,
      },
      vfImages: [ 'URL1', 'URL2', 'URL3' ],
      vfTransitions: [ 'fade', 'slide' ],
   }),

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