/vue-plain-slider

A simple slider component for Vue.js

Primary LanguageVueMIT LicenseMIT

vue-plain-slider

vue Shippable downloads license

一个基于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

垂直

Vertical.gif

水平

Horizontal.gif

循环

Loop-Mode.gif

子元素不固定大小

Different-Children-Size.gif

嵌套宫格式

Nested-Grid-Slider.gif

left-slider-delete.gif

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