Skip to content
A simple slider component for Vue.js
Branch: master
Clone or download
Latest commit d7e455d Dec 11, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist
public update to the v1.0.3 May 30, 2018
src release version@1.1.1 Dec 11, 2018
.eslintignore
.eslintrc.js release version@1.1.1 Dec 11, 2018
.gitignore
.npmignore feature: issue#3 May 31, 2018
.postcssrc.js release version@1.1.1 Dec 11, 2018
CHANGELOG.md feature: issue#3 May 31, 2018
LICENSE First commit, version-1.0.0 Aug 2, 2017
README-EN.md
README.md feature: issue#3 May 31, 2018
babel.config.js
index.js
package.json release version@1.1.1 Dec 11, 2018
vue.config.js
yarn.lock

README.md

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 ArrayBoolean 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 触发下一次轮播的时间,autotrue时有效
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

You can’t perform that action at this time.