1.1.0 • Published 5 years ago
rgg-slider v1.1.0
A slider component based on Vue
Table of contents
Installation
npm install rgg-slider
Import
import slider from 'rgg-slider'
export default {
// ...
components: {
slider,
},
// ...
}
usage
rgg-slider is a slot-based component, to provide maximum flexibility. Since every ounce of html is created by a consumer (ie. you), you can customize every piece of the component as you wish.
Very simple usage, without any CSS defined
What you need to do is provide your own slider item.
<slider
:position="pindex"
:list="list"
@slide="slide($event)">
<template v-for="(item, index) in list">
<div :slot="`item${index}`"></div>
</template>
</slider>
Tip: It's very important that the slot of every single item must be named as item${index}
.
available-props
list
necessary - The list of your slider items. The component will show nothing if you do not pass that.containerStyle
optional - The style of a single item. You can pass any css style to that to personalize style of a single item.position
optional - You can decide which item shows first when the slider show up. Example if you pass 3 to that prop, the 4th item will show first. The default value is 0.play
optional - The slider can play automatically. Default value: false.duration
optional - You can decide the duration of a single sliding animation. If the value of play is false this prop will do nothing. Default value: 3000.vertical
optional - You can decide whether the page will scroll vertically when your finger is touch on the slider area. Default value: true.
events
slide
- Once a sliding animation finished this method will invoke to the parent component. There is a param passed to the method, which decalres the direction of this animation.
Example:
slide(data) {
if (data.target === 1) { // slide forward
// ...
} else if (data.target === -1) { // slide backward
// ...
}
},