1.1.2 • Published 6 years ago
vue-carousel-picture v1.1.2
vue-carousel-picture
A vue component used for carousel picture
安装及依赖
本组件用到的依赖包如下
# vue-style-loader
npm install --save vue-style-loader
# css-loader
npm install --save css-loader
# node-sass sass-loader
npm install node-sass sass-loader
安装
使用时,仅需执行如下命令
npm install --save vue-carousel-picture
环境
"webpack": "^3.6.0",
"vue": "^2.5.2"
demo
<template>
<div class="hello">
<VueCarouselPicture :slides="slides" :inv="inv" :style="styleObject" :name="transitionName1" :target="target"></VueCarouselPicture>
</div>
</template>
<script>
import VueCarouselPicture from 'vue-carousel-picture';
import Css from 'vue-carousel-picture/dist/vue-carousel-picture.min.css'
import datu from '../../static/img/datu.jpg';
export default {
name: 'HelloWorld',
data () {
return {
slides: [{ //图片路径
src: datu,
href: ''
},
{
src: datu,
href: ''
},{
src: datu,
href: ''
}],
styleObject: {
width: '100%',
height: '400px'
},
inv: 1000, //滑动周期
transitionName1: 'move', //渐变方式
transitionName2: 'fade',
target: '_blank'
}
},
components:{
VueCarouselPicture
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
参数解释
slides 轮播图片的地址为json数组
styleObject 轮播图的大小
inv 图片切换的周期
transitionName1与transitionName2 两种图片切换方式
For a detailed explanation on how things work, check out the guide and docs for vue-loader.