Image Slider With 20 Cool Transitions - vue-flux

Install & Download:

# NPM
$ npm install vue-flux --save

Description:

This is an image slider developed with Vuejs 3, which comes with 20 cool 2D/3D transitions out of the box.

Features:

Responsive: The slider and the images are adapted to container to fill it always
Compatibility: Supported by all major browsers
Expandable: You can add your custom transitions very easily
Customization: Total customizable to suit most needs
Gestures: Mobile friendly by gestures
Parallax: It includes a parallax component very easy to set up

Basic Usage:

1. Import and register components as follows:

import {
   VueFlux,
   FluxCaption,
   FluxControls,
   FluxIndex,
   FluxPagination,
   FluxPreloader
} from 'vue-flux';

export default {
  components: {
    VueFlux,
    FluxCaption,
    FluxControls,
    FluxIndex,
    FluxPagination,
    FluxPreloader,
  },
  // ...
}

2. Add the vue-flux component to the template.

<vue-flux
   :options="vfOptions"
   :images="vfImages"
   :transitions="vfTransitions"
   :captions="vfCaptions"
   ref="slider">
   <template v-slot:preloader>
      <flux-preloader />
   </template>
   <template v-slot:caption>
      <flux-caption />
   </template>
   <template v-slot:controls>
      <flux-controls />
   </template>
   <template v-slot:pagination>
      <flux-pagination />
   </template>
   <template v-slot:index>
      <flux-index />
   </template>
</vue-flux>

export default {
  components: {
    VueFlux,
    FluxCaption,
    FluxControls,
    FluxIndex,
    FluxPagination,
    FluxPreloader,
  },
  data: () => ({
    vfOptions: {
      autoplay: true,
      // more options here
    },
    vfImages: [ '1.jpg', '2.jpg', '3.jpg' ],
    vfTransitions: [ 'fade', 'cube', 'book', 'wave' ],
    vfCaptions: [
       'Caption for image 1',
       'Caption for image 2',
       'Caption for image 3',
    ],
  }),
}