Yus-swipe NPM | npm.io

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