vue-slider: A Vue repository from bringmehome

中文 | English

##vue-slider.js

vue-slider,一个简单的滑动组件,配置简单,支持自适应/全屏+按钮+分页,同时兼容移动端和PC端

##版本 v2.1 支持vue2.0+

###目前已实现

###未来将实现

渐变滚动
视差效果

###例子

slider效果完整文档

###快速开始使用

通过以下demo来实现

###app.vue父级组件

<template>
  <slider :pages="pages" :sliderinit="sliderinit">
    <!-- slot  -->
  </slider>
</template>

<script>
import slider from './slider'// 引入slider组件
export default {
   el: '#app',
   data () {
      return {
        //图片列表[arr]
        pages:[
          {
            title: '',
            style:{
             background:'url(src/img/testimg-1.jpg)'
            }
          },
          {
           title: '',
           style:{
            background:'url(src/img/testimg-2.jpg)'
            }
          },
          {
            title: 'slide3',
            style:{
              background:'#4bbfc3',
            },
          }
        ],
        //滑动配置[obj]
        sliderinit: {
          currentPage: 0,//当前页码
          thresholdDistance: 500,//滑动判定距离
          thresholdTime: 100,//滑动判定时间
          autoplay:1000,//自动滚动[ms]
          loop:true,//循环滚动
          direction:'vertical',//方向设置，垂直滚动
          infinite:1,//无限滚动前后遍历数
          slidesToScroll:1,//每次滑动项数
        }
      }
    },
    components: {
        slider
    }
}
</script>

###pages/初始化参数

Option	Type	Default	Description
`title`	string	-	当前设置为每页的标题，未来将直接输出html
`style`	obj	-	直接作用在每个item上的style样式，可以输出背景图，背景色，每项宽度可自定义，自动切换为不定宽滚动

###sliderinit/初始化参数

Option	Type	Default	Description
`direction`	string	'horizontal'	方向设置，默认为水平滚动('horizontal'),可设置为垂直滚动('vertical')
`currentPage`	number	-	当前为第几页
`thresholdDistance`	number	-	滑动距离阈值
`thresholdTime`	number	-	滑动时间阈值
`autoplay`	number[ms]	-	自动播放:时间[ms]
`loop`	boolean	false	循环滚动
`infinite`	number	1	loop无缝滚动时,可以设置前后遍历数
`slidesToScroll`	number	1	每次滑动切换的页数

###API/父级传递的事件

Method	Parameters	Description	Example
`slideTo`	number	滑动到(number)页	`childComponents.$emit('slideTo', num)`
`slideNext`	-	滑动到下一页	`childComponents.$emit('slideNext')`
`slideTo`	-	滑动到上一页	`childComponents.$emit('slidePre')`

###API/父级监听的事件

Method	Parameters	Description	Example
`slide`	number	当前滑动到第(number)页	`childComponents.$on('slide', function(pagenum){console.log(pagenum)})`

###有更好的想法？欢迎来留下你的意见:warpcgd#1

###BUG？oh no! 可以在这里提交,会尽快处理:warpcgd#2

bringmehome/vue-slider