yus-swipe

基于 vue 的 轻量轮播组件。对于大部分应用来说 swiper 太大了， 所以需要一款轻量的轮播组件，yus-swipe 绝对能满足你的需求。

特性

• 支持水平或垂直模式
• 支持设置切换效果
• 支持动态添加或删除子项
• 兼容PC和h5

Examples

https://webang.github.io/yus-swipe/dist

Install

npm i yus-swipe -S

Usage

import Vue from 'vue'
import { Swipe, SwipeItem } from 'yus-swipe'

new Vue({
  el: 'body',
  components: {
    Swiper,
    SwipeItem
  },
  data() {
    return {
      loop: false,
      autoplay: false,
      speed: 300,
      direction: 'horizontal',
      activeIndex: 0
    }
  },
  methods: {
    handleIndexChanged(index) {
      this.activeIndex = index;
    }
  }
});

<Swipe 
  direction="horizontal"
  :activeIndex="activeIndex"
  :loop="loop"
  :speed="speed"
  :autoplay="autoplay"
  @index-changed="handleIndexChanged"
>
  <SwipeItem>1</SwipeItem>
  <SwipeItem>2</SwipeItem>
  <SwipeItem>3</SwipeItem>
</Swipe>

API

Properties

Name	Type	Default	Description
direction	String	"horizontal"	'horizontal' or 'vertical' is available
activeIndex	Number	0	Index number of initial slide
speed	Number	300	Duration of transition between slides (in ms)
autoplay	Boolean	false	Set true enable auto play
delay	Number	3000	wait time when enable autoplay
loop	Boolean	false	Set true to enable continuous loop mode
space-between	Number	0	distance between adjacent slides
width	Number	-	container width
height	Number	-	container height

Methods

Method	Description
slideNext()	Go next page.
slidePrev()	Go previous page.
slideTo(Number)	slide to number.

Events

Name	Parameters	Description
index-changed	index	current slide index

Slots

Name	Description
pagination	slide pagination