Version 6 is still in beta stage
This is an image slider developed with Vuejs 2 which comes with 20 cool transitions out of the box.
You can view a demo here.
Feature | Description |
---|---|
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 |
Functionality | You can use arrow keys to navigate. Switch to full screen |
Parallax | It includes a parallax component very easy to set up |
Install and save the package.
source-shell
npm install --save vue-flux@beta
Add the component to the template. This one has all the complements, so you can remove the ones you don’t want.
text-html-basic
<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>
<button @click="$refs.slider.show('next')">NEXT</button>
Add it to the component, and like before you can remove the complements you don’t use.
source-js
import {
VueFlux,
FluxCaption,
FluxControls,
FluxIndex,
FluxPagination,
FluxPreloader,
} from 'vue-flux';
export default {
components: {
VueFlux,
FluxCaption,
FluxControls,
FluxIndex,
FluxPagination,
FluxPreloader,
},
data: () => ({
vfOptions: {
autoplay: true
},
vfImages: [ 'URL1', 'URL2', 'URL3' ],
vfTransitions: [ 'fade', 'cube', 'book', 'wave' ],
vfCaptions: [
'Caption for image 1',
'Caption for image 2',
'Caption for image 3',
],
}),
}
Weight is about 130KB so is pretty light having only the essential CSS. It also does not require a high end computer as animations are performed with CSS3 hardware acceleration.
As simple as this.
text-html-basic
<flux-parallax src="url" style="height: 300px;">
<div>CONTENT</div>
</flux-parallax>
If you find yourself running into issues during installation or running the slider, please check our documentation. If still needs help open an issue. We would be happy to discuss how they can be solved.
You can view the full documentation at the project’s documentation with examples and detailed information.
Check the changelog for update info.
This slider was inspired by Flux Slider.
Contributions, questions and comments are all welcome and encouraged.
Do not hesitate to send me your own transitions to add them to the slider.
#vuejs #vue-js #javascript