Vue html slider

A simple, light and configurable vue silder component.

Version: 1.3.3 Updated: 10/20/2019

By: git-onepixel License: MIT

Downloads Last 30 Days: 281

vue-html-slider

npm downloads license

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.

avatar

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.

Categories: Vue js