1.0.4 • Published 6 years ago

va-carousel v1.0.4

Weekly downloads
31
License
-
Repository
github
Last release
6 years ago

va-carousel

一个基于 vue 的图片轮播组件

体验

方式 1

在线Demo http://va-carousel.xiaoshang.online

方式 2

git clone https://github.com/zhangxiaoshang/va-carousel.git
cd va-carousel
npm install
npm start

使用

1.使用 vue-cli 构建一个项目

# 这里默认你已经安装了vue-cli
vue init webpack vue-project

2.安装 va-carousel

cd vue-project
npm install --save va-carousel

3.导入组件

在需要使用 VaCarousel 的组件中,导入组件

js 部分

<script>
import VaCarousel from 'va-carousel/src/components/VaCarousel'

export default {
  name: 'App',
  components: {
    VaCarousel
  }
}
</script>

template 部分

<template>
  <div id="app">
    <VaCarousel/>
  </div>
</template>

4.启动项目

npm run dev

Attributes

参数说明类型可选值默认值
items数据列表, 每个元素是一个对象,其中 id、src 属性是必需要有的(不允许有重复的 id)array--
total需要显示的图片数量,当数量为奇数时,中间图片会
被放大number-7
height走马灯的高度string-180px
width走马灯的宽度string-90%
imgWidth图片宽度string-100%
imgHeight图片高度string-70%
autoplay是否自动切换boolean-true
interval自动切换的时间间隔,单位为毫秒number-2000
prevText向上箭头上显示的内容string-prev
nextText向下箭头上显示的内容string-next
arrow切换箭头的显示时机stringalways/hover/neverhover

Events

事件名称说明回调参数
selectedItem点击图片时触发当前图片对象,当前图片在列表中的位置

Slot

name说明
prev向上箭头区域的内容
next向下箭头区域的内容
1.0.4

6 years ago

1.0.3

6 years ago

1.0.2

6 years ago

1.0.1

6 years ago

1.0.0

6 years ago