This is an image slider developed with Vuejs 2 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', ], }), }
Preview:
Changelog:
02/05/2021
- v6.4.0
Download Details:
Author: ragnarlotus
Live Demo: https://ragnarlotus.github.io/vue-flux-docs/demos/
Download Link: https://github.com/ragnarlotus/vue-flux/archive/refs/heads/dev.zip
Official Website: https://github.com/ragnarlotus/vue-flux
Install & Download:
# NPM
$ npm install vue-flux --save