Carousel 轮播 pass 0.0.13+
基础样式
基础用法以及 dot 指示器
tip：height 属性默认为100%
1
2
3
4
1
2
3
4
展开查看
提示
需要结合<mg-carousel-item> 组件使用
<template>
<div class="first">
<mg-carousel :dot='true' :height="'180px'">
<mg-carousel-item v-for="i in 4">
<div class="item">{{i}}</div>
</mg-carousel-item>
</mg-carousel>
</div>
<div class="line"></div>
<div class="sec">
<mg-carousel
:dot='true'
:height="'180px'"
:dot-position="'right'"
:direction="'vertical'"
:dot-trigger="'hover'">
<mg-carousel-item v-for="i in 4">
<div class="item">{{i}}</div>
</mg-carousel-item>
</mg-carousel>
</div>
</template>
<style>
.mg-carousel-item:nth-of-type(odd) .item{
background-color: #8ac007;
}
.mg-carousel-item:nth-of-type(even) .item{
background-color: #3eaf7c;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
无限滚动与箭头
有些抱歉的是 arrow 只会出现在水平方向...并未支持垂直方向的样式
小声说，其实主要是一上一下感觉不大好看
1
2
3
4
展开查看
<template>
<mg-carousel :arrow="'hover'" :infinity="true" :height="'180px'">
<mg-carousel-item v-for="i in 4">
<div class="item">{{i}}</div>
</mg-carousel-item>
</mg-carousel>
</template>
1
2
3
4
5
6
7
2
3
4
5
6
7
卡片式的轮播
另一种样式，长下面这个样子...
1
2
3
4
展开查看
<template>
<mg-carousel
:type="'card'"
:arrow="'always'"
:duration="800"
:infinity="true"
:height="'180px'">
<mg-carousel-item v-for="i in 4">
<div class="item" :style="{backgroundColor:colors[i - 1]}">{{i}}</div>
</mg-carousel-item>
</mg-carousel>
</template>
<script>
export default{
data(){
return{
colors:['#8ac007','#3eaf7c','#e7c000','#859bff']
}
}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
动画效果
除滚动外也可以使用渐变的方式，给 animate 属性传入 'fade'
1
2
3
4
展开查看
<template>
<mg-carousel :arrow="'always'" :animate="'fade'" :height="'180px'">
<mg-carousel-item v-for="i in 4">
<div class="item" :style="{backgroundColor:colors[i - 1]}">{{i}}</div>
</mg-carousel-item>
</mg-carousel>
</template>
1
2
3
4
5
6
7
2
3
4
5
6
7
Carousel Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| height | 高度 | string | - | 100% |
| initActiveIndex | 起始的index | number | - | 0 |
| autoplay | 是否自动播放 | boolean | - | true |
| interval | 播放间隔，ms | number | - | 3000 |
| duration | 过度动画的时长，ms | number | - | 400 |
| direction | 滚动方向 | string | horizontal,vertical | horizontal |
| dot | 是否展示指示器 | boolean | - | false |
| dotTrigger | 指示器的触发方式 | string | hover,click | click |
| dotPosition | 指示器展示的位置 | string | bottom,top,left,right | bottom |
| infinity | 无限滚动 | boolean | - | true |
| type | 卡片风格 | string | card | - |
| arrow | 何时展示箭头 | string | hover,never,always | never |
| animate | 动画样式 | string | scroll,fade | scroll |
Carousel Event
| 事件 | 说明 | 回参 |
|---|---|---|
| next | 切换至下一张时触发 | 当前活跃项的索引 |
| prev | 切换至上一张时触发 | 当前活跃项的索引 |
Carousel Methods
| 方法 | 说明 | 参数 | 返回值 |
|---|---|---|---|
| next | 切换至下一张 | - | - |
| prev | 切换至上一张 | - | - |
| setActive | 切换至指定索引 | number | - |