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

Methods

Events

License

MIT