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