Hi-kits

Carousel 走马灯

8/25/2022 卡片轮播

当选项过多时，使用下拉菜单展示并选择内容。

# 何时使用

import { HiCarousel } from 'hi-kits/carousel'
1

# 基本用法

适用广泛的基础用法,设置autoplay可自动播放

1
2
3
4
1
2
3
4
<h-row gutter="30">
    <h-col span="12">
        <h-carousel autoplay>
            <h-carousel-item>
                <div>1</div>
            </h-carousel-item>
            <h-carousel-item>
                <div>2</div>
            </h-carousel-item>
            <h-carousel-item>
                <div>3</div>
            </h-carousel-item>
            <h-carousel-item>
                <div>4</div>
            </h-carousel-item>
        </h-carousel>
    </h-col>
        <h-col span="12">
        <h-carousel>
            <h-carousel-item>
                <div>1</div>
            </h-carousel-item>
            <h-carousel-item>
                <div>2</div>
            </h-carousel-item>
            <h-carousel-item>
                <div>3</div>
            </h-carousel-item>
            <h-carousel-item>
                <div>4</div>
            </h-carousel-item>
        </h-carousel>
    </h-col>
</h-row>
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
Expand Copy

# 指示器

可以修改指示器的显示位置，dotPosition设置为none则不显示，设置为outside则显示在容器外部

1
2
3
1
2
3
1
2
3
1
2
3
<h-row gutter="30">
    <h-col span="12">
        <h-carousel dotPosition="center">
          <h-carousel-item>
            <div>1</div>
          </h-carousel-item>
          <h-carousel-item>
            <div>2</div>
          </h-carousel-item>
          <h-carousel-item>
            <div>3</div>
          </h-carousel-item>
          </h-carousel-item>
        </h-carousel>
      </h-col>
      <h-col span="12">
        <h-carousel dotPosition="left">
          <h-carousel-item>
            <div>1</div>
          </h-carousel-item>
          <h-carousel-item>
            <div>2</div>
          </h-carousel-item>
          <h-carousel-item>
            <div>3</div>
          </h-carousel-item>
          </h-carousel-item>
        </h-carousel>
      </h-col>
      <h-col span="12">
        <h-carousel dotPosition="outside">
          <h-carousel-item>
            <div>1</div>
          </h-carousel-item>
          <h-carousel-item>
            <div>2</div>
          </h-carousel-item>
          <h-carousel-item>
            <div>3</div>
          </h-carousel-item>
          </h-carousel-item>
        </h-carousel>
      </h-col>
      <h-col span="12">
        <h-carousel dotPosition="none">
          <h-carousel-item>
            <div>1</div>
          </h-carousel-item>
          <h-carousel-item>
            <div>2</div>
          </h-carousel-item>
          <h-carousel-item>
            <div>3</div>
          </h-carousel-item>
          </h-carousel-item>
        </h-carousel>
    </h-col> 
</h-row>
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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
Expand Copy

# 切换箭头

可以设置切换箭头的显示时机,arrow默认为hover,效果是鼠标进入容器箭头显示，离开箭头隐藏，当arrow设置为always 时，箭头一直显示，设置为none时，不显示箭头

1
2
3
4
1
2
3
4
<h-row gutter="30">
    <h-col span="12">
        <h-carousel arrow="always">
            <h-carousel-item>
                <div>1</div>
            </h-carousel-item>
            <h-carousel-item>
                <div>2</div>
            </h-carousel-item>
            <h-carousel-item>
                <div>3</div>
            </h-carousel-item>
            <h-carousel-item>
                <div>4</div>
            </h-carousel-item>
        </h-carousel>
    </h-col>
    <h-col span="12">
        <h-carousel arrow="nerver" autoplay>
            <h-carousel-item>
                <div>1</div>
            </h-carousel-item>
            <h-carousel-item>
                <div>2</div>
            </h-carousel-item>
            <h-carousel-item>
                <div>3</div>
            </h-carousel-item>
            <h-carousel-item>
                <div>4</div>
            </h-carousel-item>
        </h-carousel>
    </h-col>
</h-row>
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
Expand Copy

# 指示器点击风格

可以修改指示器的点击风格，默认为fillup

1
2
3
4
1
2
3
4
<h-row gutter="30">
    <h-col span="12">
        <h-carousel dotType="scaleup">
            <h-carousel-item>
                <div>1</div>
            </h-carousel-item>
            <h-carousel-item>
                <div>2</div>
            </h-carousel-item>
            <h-carousel-item>
                <div>3</div>
            </h-carousel-item>
            <h-carousel-item>
                <div>4</div>
            </h-carousel-item>
        </h-carousel>
    </h-col>
    <h-col span="12">
        <h-carousel dotType="puff">
            <h-carousel-item>
                <div>1</div>
            </h-carousel-item>
            <h-carousel-item>
                <div>2</div>
            </h-carousel-item>
            <h-carousel-item>
                <div>3</div>
            </h-carousel-item>
            <h-carousel-item>
                <div>4</div>
            </h-carousel-item>
        </h-carousel>
    </h-col>
</h-row>
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
Expand Copy

# 自定义自动播放时间间隔

可以修改自动切换的时间间隔，单位是毫秒，默认1秒

1
2
3
4
<h-row gutter="30">
    <h-col span="12">
        <h-carousel interval="3000" autoplay>
            <h-carousel-item>
                <div>1</div>
            </h-carousel-item>
            <h-carousel-item>
                <div>2</div>
            </h-carousel-item>
            <h-carousel-item>
                <div>3</div>
            </h-carousel-item>
            <h-carousel-item>
                <div>4</div>
            </h-carousel-item>
        </h-carousel>
    </h-col>
</h-row>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
Expand Copy

# 修改初始化激活状态的索引

初始状态激活的幻灯片的索引,默认从 0 开始

1
2
3
4
<h-row>
    <h-col span="12">
        <h-carousel initCurrent="2">
            <h-carousel-item>
                <div>1</div>
            </h-carousel-item>
            <h-carousel-item>
                <div>2</div>
            </h-carousel-item>
            <h-carousel-item>
                <div>3</div>
            </h-carousel-item>
            <h-carousel-item>
                <div>4</div>
            </h-carousel-item>
        </h-carousel>
    </h-col>
</h-row>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
Expand Copy

# 参数说明

参数 说明 类型 可选值 默认值
height 走马灯的高度 number - -
autoplay 是否自动播放 boolean - false
dotPosition 指示器的位置 string 'left' | 'center' | 'right' | 'outside' | 'none' 'right'
dotType 指示器点击风格 string 'puff' | 'scaleup' | 'fillup' 'fillup'
arrow 箭头显示方式 string 'always' | 'hover' | 'never' 'hover'
initCurrent 初始状态激活的幻灯片的索引，从 0 开始 number - 0
interval 自动切换的时间间隔，单位为毫秒 number - 1000
onchange 幻灯片切换时触发 返回目前激活的幻灯片的索引，原幻灯片的索引 Function - -
Last Updated: 4/25/2023, 16:14:30

Popup 弹出窗