A slider component based on Vue

Table of contents

• Installation
• Import
• Usage
• Available props
• events

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
        // ...
    }
},