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	切换箭头的显示时机	string	always/hover/never	hover

Events

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

Slot

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