Welcome to version 0.0.2 of Flexi Slider, an easy to implement, and well maintained Vue.js component.
You can support this project by giving it a star, or following the author. ❤️.
Flexi Slider vue component made by Oliver
- npm install flexi-slider --save
import Vue from 'vue';
import FlexiSlider from 'flexi-slider';
Vue.use(FlexiSlider);
export default {
data() {
return {
inputData: [
{
title: "Some Title 1",
paragraph: "Some Lorem Ipsum 1",
img:
"https://app.imgforce.com/images/user/AwB_1617252386_ohrid4.jpg",
},
{
title: "Some Title 2",
paragraph: "Some Lorem Ipsum 2",
img:
"https://app.imgforce.com/images/user/yqI_1617252387_ohrid3.jpg",
},
{
title: "Some Title 3",
paragraph: "Some Lorem Ipsum 3",
img:
"https://app.imgforce.com/images/user/bXz_1617252387_ohrid2.jpg",
},
{
title: "Some Title 4",
paragraph: "Some Lorem Ipsum 4",
img:
"https://app.imgforce.com/images/user/K3X_1617252387_ohrid1.jpg",
}
]
}
}
}<flexi-slider />
<flexi-slider
:inputData="inputData"
:turnTimer="false"
:timerInterval="1000"
:nextButtonText="'Next'"
:prevButtonText="'Prev'"
>
| Name | Type | Mandatory | Description
| :----- | :------- | :-------- |-------------------------------
| inputData | Array | No | Default data array. Look at the sample above to see what data could be passed as array
| turnTimer | Boolean | No | False by default. If true, slider will change slides automatically
| timerInterval | Number | No | Time interval in miliseconds for chaning slides. By default it is set to 2000ms (slides will change automatically in every 2 seconds)
| transitionOn | Boolean | No | Turn on or turn off the transition. By default, transition is turn on.
| transitionName | String | No | Change the transition class with your custom class. By default, the name of the transition class is slider
| nextButtonText | String | No | Text for the next button
| prevButtonText | String | No | Text for the prev button