# rgg-slider

> A slider component based on Vue.

Latest version **1.1.0** (published 2019-03-20) · ISC license · 0 weekly downloads

## Install

```sh
npm install rgg-slider
pnpm add rgg-slider
yarn add rgg-slider
bun add rgg-slider
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.0 |
| Published | 2019-03-20 |
| First published | 2019-03-19 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 17.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 3 |
| Author | Gerald Chain |
| Maintainers | as17744 |
| Keywords | vue, slider |

## Links

- npm: https://www.npmjs.com/package/rgg-slider
- Repository: https://github.com/as17744/rgg-slider
- Homepage: https://github.com/as17744/rgg-slider#readme
- Issues: https://github.com/as17744/rgg-slider/issues
- npm.io page: https://npm.io/package/rgg-slider

## Alternatives

- [adhdev](https://npm.io/package/adhdev.md) — 11.1K weekly downloads
- [react-slide-button](https://npm.io/package/react-slide-button.md) — 310 weekly downloads
- [better](https://npm.io/package/better.md) — 42 weekly downloads
- [react-native-swipe-image](https://npm.io/package/react-native-swipe-image.md) — 22 weekly downloads
- [nl.fokkezb.pulltorefresh](https://npm.io/package/nl.fokkezb.pulltorefresh.md) — 11 weekly downloads

## Recent versions

- 1.1.0 (latest) — 2019-03-20
- 1.0.2 — 2019-03-20
- 1.0.1 — 2019-03-19
- 1.0.0 — 2019-03-19

## README

# A slider component based on Vue
## Table of contents
- [Installation](#installation)
- [Import](#import)
- [Usage](#usage)
- [Available props](#available-props)
- [events](#events)
## Installation
```bash
npm install rgg-slider
```
## Import
```js
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.
```html
<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: 
```js
slide(data) {
    if (data.target === 1) { // slide forward
        // ...
    } else if (data.target === -1) { // slide backward
        // ...
    }
},
```

---
_Source: https://npm.io/package/rgg-slider · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._