vue-html-slider

A simple, light and configurable vue silder component.

Install

use npm

npm install vue-html-slider

use yarn

yarn add vue-html-slider

Get Started

Just one property is required to start the slider as follows.

<!--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 which provides a real experience for you.

Advanced

Slider defines many properties for customizing what you want. You can set the options property to slider as follow.

<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.

<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 file for details.