vue-pure-slider

vue-pure-slider.js

vue-pure-slider, A simple vue component, Easy use, Easy configuration, Compatible Mobile&PC

Demo

Install

  npm install vue-pure-slider --save

Usage

<template>
  <div id="sliderWrap">
    <pure-slider container="sliderWrap" :items='items'></pure-slider>
  </div>
</template>
 
<script>
  import pureSlider from 'vue-pure-slider';
  export default {
    components: {
      pureSlider
    },
    data () {
      return {
        items:[
          {
            title: 'pic1',
            imgUrl: 'http://kuscript.com/vue-pure-slider/img/slider1.jpg',
            link: ''
          },
          {
            title: 'pic2',
            imgUrl: 'http://kuscript.com/vue-pure-slider/img/slider2.jpg',
            link: ''
          },
          {
            title: 'pic3',
            imgUrl: 'http://kuscript.com/vue-pure-slider/img/slider3.jpg',
            link: ''
          }
        ],
      }
    }
  }
</script> 

Props Param

Option	Type	Required	Default	Description
container	String	Yes	''	Slider wrapper id
items	Array	Yes	[]	Slider list｛title:'title', imgUrl: 'picture src', link: 'Slider link'｝
start	Number	-	0	Slider start position
continue	Boolean	-	true	Loop slide
auto	Number	-	4000	Auto play time interval (ms)
speed	Number	-	300	Slide duration (ms)
propagation	Boolean	-	true	Event stopPropagation
slidefn	Function	-	-	Sliding callback function
endfn	Function	-	-	End of slide callback function

Q&A

https://github.com/blackie4/vue-pure-slider/issues

License

MIT