# vue-html-slider

> A simple, light and configurable vue silder component.

Latest version **1.3.3** (published 2019-10-20) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue-html-slider
pnpm add vue-html-slider
yarn add vue-html-slider
bun add vue-html-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.3.3 |
| Published | 2019-10-20 |
| First published | 2018-08-08 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 242 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Onepixel |
| Maintainers | onepixel |
| Keywords | vue, component, slider, carousel, bounce |

## Links

- npm: https://www.npmjs.com/package/vue-html-slider
- Repository: https://github.com/git-onepixel/vue-html-slider
- Homepage: https://github.com/git-onepixel/vue-html-slider#readme
- Issues: https://github.com/git-onepixel/vue-html-slider/issues
- npm.io page: https://npm.io/package/vue-html-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.3.3 (latest) — 2019-10-20
- 1.3.2 — 2019-10-13
- 1.3.1 — 2019-10-13
- 1.3.0 — 2019-10-13
- 1.2.5 — 2019-10-13
- 1.2.4 — 2019-04-13
- 1.2.3 — 2019-03-02
- 1.2.2 — 2019-03-02
- 1.2.1 — 2019-03-02
- 1.2.0 — 2019-02-24
- 1.1.9 — 2019-01-27
- 1.1.8 — 2019-01-27
- 1.1.7 — 2018-10-05
- 1.1.6 — 2018-09-01
- 1.1.5 — 2018-08-28
- … 15 more at https://npm.io/package/vue-html-slider/versions

## README

# vue-html-slider

[![npm][npm]][npm-url] 
[![downloads][downloads]][downloads-url]
[![license][license]][license-url]

A simple, light and configurable vue silder component.

[npm]: https://img.shields.io/npm/v/vue-html-slider.svg
[npm-url]: https://www.npmjs.com/package/vue-html-slider
[downloads]: https://img.shields.io/npm/dm/vue-html-slider.svg
[downloads-url]: https://npmcharts.com/compare/vue-html-slider?minimal=true
[license]: https://img.shields.io/npm/l/vue-html-slider.svg
[license-url]:https://github.com/git-onepixel/vue-html-slider/blob/master/LICENSE

## Install
use npm
``` bash
npm install vue-html-slider
```
use yarn
``` bash
yarn add vue-html-slider
```

## Get Started
Just one property is required to start the slider as follows.
``` html
<!--vue template-->
<template> 
  <vue-html-slider :data="images"></vue-html-slider>
</template>
<script>
  import vueHtmlSlider from 'vue-html-slider';
  export default {
    components: {
      'vue-html-slider': vueHtmlSlider
    },
    data() {
      return {
        images: [
          'http://path/to/a.png',
          'http://path/to/b.png'
        ]
      }
    }
  }
</script>
```
With just a few steps, you can create a slider application. As well, there is an online [demo](https://git-onepixel.github.io/vue-html-slider/index.html) which provides a real experience for you. 

![avatar](https://git-onepixel.github.io/vue-html-slider/qrcode.png)
 
## Advanced
Slider defines many properties for customizing what you want. You can set the `options` property to slider as follow.

``` html
<template> 
  <vue-html-slider :options="options"></vue-html-slider>
</template>
<script>
  // ...
  export default {
    // ...
    data() {
      return {
        options: {
          index: 0,
          lazyload: true,
          useFade: true,
          click() {
            // user click event callback.
          }
        }
      }
    }
  }
</script>
```

The `options` contains many properties. All properties are listed below.

| Property | Type | default/params | Description | 
| ------ | ------ | ------ | ------ | 
| index | Number | 0 |  Default image position index. |
| autoplay | Boolean | false | Whether autoplay, not implement. |
| interval | Number | 1000 |  Autoplay interval mills, not implement. |
| loop | Boolean | false | Playing slider with loop, not implement. |
| clsName | String | - | Apply a css class on image element. | 
| gapWidth | Number | 0 | You can set a gap between each image.|
| useFade | Boolean | false | Apply fade animation to image when appears. |
| lazyload | Boolean | false | The image will be loaded only appears, if true. |
| zoom | Boolean | false | You can zoom picture scale by gesture if set true, not implement.|
| loading | String | - | It will be shown before loaded. A html template or characters are supported.| 
| error | String | - | It will be shown after load error. A html template or characters are supported.|   
| hideIndicator | Boolen | false | Whether hide page number on bottom of image. As well, it can display 20 indicators at most.| 
| isDebug | Boolean | false | In Debug mode, slider will print some log infos by `console.log`. |
| disableBounce | Boolen | false | Whether disable bounce when reached slider boundary. |
| changed | Function | image |  It will be fired when image position changed. |
| click | Function | image | A click event fired on image element. |
| longTap | Function | image |  A `longTap` event on image element. |
| longTapEnd | Function | image | It will be fired when the `longTap` event completes. |

## Pull-left / Pull-right
You can move more when reached slider left or right boundary if you set `disableBounce` false. So, you can listen the event by setting the `pull-left` or `pull-right` property to slider as follows.

``` html
<template>
  <vue-html-slider :pull-left="pullLeft"></vue-html-slider>
</template>
<script>
  // ...
  export default {
    // ...
    data() {
      return {
        pullLeft: {
          tpl: '<div class="foo">query all</div>',
          pull(x) {
            // pulling continuously.
          },
          release(x) {
            // released.
          }
        }
      }
    }
  }
</script>
```
The `pull-left` and `pull-right` have three properties respectively as follows.

| Property | Type | params | Description | 
| ------ | ------ | ------ | ------ | 
| tpl | String | - |  A html template will be shown when beyond slider boundary. Characters are also supported. |
| pull | Function | x | A pull event will be fired continuously before released. |
| release | Function | x | A release event will be fired when released. |

> The `pull` or `release` parameter `x` refers to the distance that page leaves the boundary which is an absolute value.

## License
This project is licensed under the MIT License.
See the [LICENSE.md](https://github.com/git-onepixel/vue-html-slider/blob/master/LICENSE) file for details.

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