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.