vue-concise-slider 一个轻量的vue幻灯片组件

中文 | Englishhtml

vue-concise-slider.js

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

版本

v2.1.2 支持vue2.0+java

目前已实现

将来将实现

渐变滚动
视差效果

例子

slider效果
 完整文档git

安装

npm install vue-concise-slider --save

如何使用

<template> <slider :pages="pages" :sliderinit="sliderinit"> <!-- slot --> </slider> </template> <script> import slider from 'vue-concise-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)})`

本文复制自https://juejin.im/entry/5959f20f5188250d9b23ef37/github