songyazhao / vue-plain-slider

A simple slider component for Vue.js

vue-plain-slider

一个基于Vue的简单滑块/轮播组件

English Document

特性

• 获取异步数据
• 轻量级, 无其他依赖
• 导航, 分页 和 箭头
• 触摸、鼠标控制
• 水平或者垂直滑动, 左或右对齐

安装

npm install --save vue-plain-slider # Or yarn add vue-plain-slider

使用

基础用法

<template>
  <Slider
    ref="Slider"
    direction="horizontal"
    :mousewheel-control="true"
    :performance-mode="true"
    :pagination-visible="true"
    :pagination-clickable="true"
    :loop="true"
    :speed="500"
    @slide-change-start="onSlideChangeStart"
    @slide-change-end="onSlideChangeEnd">
      <div>Page 1</div>
      <div>Page 2</div>
      <div>Page 3</div>
  </Slider>
</template>

<script>
import Slider from 'vue-plain-slider'

export default {
  name: 'slider-demo',
  components: { Slider },
  methods: {
    onSlideChangeStart (currentPage, el) {
      console.log('onSlideChangeStart', currentPage, el);
    },
    onSlideChangeEnd (currentPage, el) {
      console.log('onSlideChangeEnd', currentPage, el);
    }
  }
}
</script>

<style scoped>
.slider {
  height: 300px;
}
</style>

更多Demo

• 完整实例

垂直

水平

循环

子元素不固定大小

嵌套宫格式

• 如果你想做一个左滑删除的效果

Api

Properties

Name	Type	Default	Description
align	String	"left"	对齐方向，direction为'horizontal'时有效，可选 'left'、'right'。
auto	Boolean	false	是否自动轮播。
asyncData	Array、Boolean	false	为false时表示数据不需要异步，当数据为异步获取或者需要动态改变的时，必须加此属性，值为与v-for绑定的同一字段
curPage	Number	1	设置默认从第几个开始。
direction	String	"vertical"	滑动方向，可选 'horizontal'(水平) 或者 'vertical'(垂直)。
dragEnable	Boolean	true	是否启用拖拽。
mousewheel-control	Boolean	true	设置为 true 使slider可以通过鼠标滚轮控制。
pagination-visible	Boolean	false	是否显示切换的分页 (hide/true)。
pagination-clickable	Boolean	false	如果为 true 点击分页切换到对应的滑块。
performance-mode	Boolean	true	是否启用过渡,关闭过渡会提升相应的渲染性能。
loop	Boolean	false	是否启用轮播模式。
interval	Number	3000	触发下一次轮播的时间，auto为true时有效
speed	Number	500	滑块之间的过渡时间。

Methods

Method	Description
next()	下一个滑块。
prev()	上一个滑块。
setPage(Number)	跳到指定页数的滑块。

Events

Name	Arguments	Description
slide-change-start	pageNumber element	动画之前触发(到下一个或上一个滑块)。
slide-change-end	pageNumber element	动画之后触发(到下一个或上一个滑块)。
slide-revert-start	pageNumber element	动画之前触发(没有变化)。
slide-revert-end	pageNumber element	动画之后触发(没有变化)。
slider-move	offset	回调函数,触摸移动过程中触发。

License

MIT