Skip to content
一个基于vue的图片轮播组件
JavaScript Vue HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
build
config
src edit readme & demo Apr 28, 2018
static
test
.babelrc
.editorconfig
.eslintignore
.eslintrc.js
.gitignore
.postcssrc.js
README.md
index.html
package-lock.json
package.json 1.0.3 Apr 28, 2018

README.md

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 向下箭头区域的内容
You can’t perform that action at this time.