# vue-snb-slider

> A touch slider for vue.js.

Latest version **3.0.5** (published 2019-04-30) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue-snb-slider
pnpm add vue-snb-slider
yarn add vue-snb-slider
bun add vue-snb-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 | 3.0.5 |
| Published | 2019-04-30 |
| First published | 2019-04-30 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 843.6 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 2 |
| Author | i@cheris.cn |
| Maintainers | cheris |
| Keywords | table, ui-table, vue |

## Links

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

## Dependencies (1)

- [highlight.js](https://npm.io/package/highlight.js.md) ^9.15.6

## Alternatives

- [@lexical/table](https://npm.io/package/@lexical/table.md) — 3.0M weekly downloads
- [mantine-datatable](https://npm.io/package/mantine-datatable.md) — 98.2K weekly downloads
- [react-native-collapsible-tab-view](https://npm.io/package/react-native-collapsible-tab-view.md) — 70.6K weekly downloads
- [@handsontable/vue3](https://npm.io/package/@handsontable/vue3.md) — 16.1K weekly downloads
- [vuewordcloud](https://npm.io/package/vuewordcloud.md) — 7.2K weekly downloads

## Recent versions

- 3.0.5 (latest) — 2019-04-30

## README

# vue-snb-slider

vue-snb-slider is a slider componen for Vue.js.

[![GitHub stars](https://img.shields.io/github/stars/cherislive/vue-snb-slider.svg?style=flat-square)](https://github.com/cherislive/vue-snb-slider/stargazers)
[![Build Status](https://travis-ci.org/cherislive/vue-snb-slider.svg?branch=master)](https://travis-ci.org/cherislive/vue-snb-slider)
[![GitHub issues](https://img.shields.io/github/issues/cherislive/vue-snb-slider.svg?style=flat-square)](https://github.com/cherislive/vue-snb-slider/issues)
[![GitHub forks](https://img.shields.io/github/forks/cherislive/vue-snb-slider.svg?style=flat-square)](https://github.com/cherislive/vue-snb-slider/network)
[![GitHub last commit](https://img.shields.io/github/last-commit/google/skia.svg?style=flat-square)](https://github.com/cherislive/vue-snb-slider)
[![license](https://img.shields.io/github/license/mashape/apistatus.svg?style=flat-square)](https://github.com/cherislive/vue-snb-slider)
[![NPM](https://nodei.co/npm/vue-snb-slider.png?downloads=true&downloadRank=true&stars=true)](https://nodei.co/npm/vue-snb-slider/)
[![NPM](https://nodei.co/npm-dl/vue-snb-slider.png?months=9&height=3)](https://nodei.co/npm/vue-snb-slider/)



## Mobile demo

![https://cherislive.github.io/projrct/vue-snb-slider/](./20190321-173707.png)

## Install

```bash
$ npm install vue-snb-slider
```

## Import

### Import using module

Import components to your project:

``` js
// in ES6 modules
import { Slider, SliderItem } from 'vue-snb-slider';

// in CommonJS
const { Slider, SliderItem } = require('vue-snb-slider');

// in Global variable
const { Slider, SliderItem } = VueSnbSlider;
```

And register components:

``` js
Vue.component('slider', Slider);
Vue.component('slider-item', SliderItem);
```

### Import using script tag

``` html
<script src="../node-modules/vue-snb-slider/dist/vue-snb-slider.js"></script>
```

``` js
const vueSlider = VueSnbSlider.Slider;
const vueSliderItem = VueSnbSlider.SliderItem;

new Vue({
  el: 'body',
  components: {
    'slider': vueSlider,
    'slider-item': vueSliderItem
  }
});
```

## Usage

Work on a Vue instance:

```HTML
<slider>
  <slider-item>slider1</slider-item>
  <slider-item>slider2</slider-item>
  <slider-item>slider3</slider-item>
</slider>
```
## Slider Options

### Props

| Option | Type | Description | Default |
| ----- | ----- | ----- | ----- |
| perView | Number | Number of slides per view (min:1). | 1 |
| perGroup | Number | Set numbers of slides to define and enable group sliding. Useful to use with perView >= perGroup | 1 |
| groupFull | Boolean | --- | false |
| showIndicators | Boolean | Show indicators on slider bottom | true |

### Events

| Event Name | Description | params |
| ----- | ----- | ----- |
| change | triggers when current slider-item change | new slider item Index |

## SliderItem Options

### Props

| Option | Type | Description | Default |
| ----- | ----- | ----- | ----- |
| item | Object | -- | -- |

### Events

| Event Name | Description | params |
| ----- | ----- | ----- |
| sliderItemOnClick | triggers when click slider-item | Props item: {}  |

## Development

Watching with hot-reload:

```bash
$ npm run dev
```

Develop on real remote device:

```bash
$ npm run remote-dev {{ YOUR IP ADDRESS }}
```

## License

MIT

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