Kunlun Design简体中文
Carousel 走马灯
在有限空间内，循环播放同一类型的图片、文字等内容。
基础用法
使用 click 指示器触发。
1
2
3
4
<>
<template>
<KlCarousel class="block">
<div class="carousel-item">1</div>
<div class="carousel-item">2</div>
<div class="carousel-item">3</div>
<div class="carousel-item">4</div>
</KlCarousel>
</template>
<script lang="ts"></script>
<style>
.block {
margin: 20px;
}
.carousel-item {
height: 300px;
width: 400px;
background-color: var(--theme-color-dark);
color: aliceblue;
display: flex;
align-items: center;
justify-content: center;
}
</style>
使用 hover 指示器触发。
1
2
3
4
<>
<template>
<KlCarousel class="block" trigger="hover">
<div class="carousel-item">1</div>
<div class="carousel-item">2</div>
<div class="carousel-item">3</div>
<div class="carousel-item">4</div>
</KlCarousel>
</template>
<script lang="ts"></script>
<style>
.block {
margin: 20px;
}
.carousel-item {
height: 300px;
width: 600px;
background-color: var(--theme-color-dark);
color: aliceblue;
display: flex;
align-items: center;
justify-content: center;
}
</style>
指示器的位置
通过设置indicator-position为outside实现指示器在外面，还可以设置为none隐藏指示器
1
2
3
4
<>
<template>
<KlCarousel class="block" indicatorPosition="outside">
<div class="carousel-item">1</div>
<div class="carousel-item">2</div>
<div class="carousel-item">3</div>
<div class="carousel-item">4</div>
</KlCarousel>
</template>
<script lang="ts"></script>
<style>
.block {
margin: 20px;
}
.carousel-item {
height: 300px;
width: 400px;
background-color: var(--theme-color-dark);
color: aliceblue;
display: flex;
align-items: center;
justify-content: center;
}
</style>
切换箭头显示时机
通过设置arrow属性为always/hover/never设置箭头显示时机为总是/只有鼠标在上面浮动时才显示/从不显示。
1
2
3
4
<>
<template>
<KlCarousel class="block" arrow="always">
<div class="carousel-item">1</div>
<div class="carousel-item">2</div>
<div class="carousel-item">3</div>
<div class="carousel-item">4</div>
</KlCarousel>
</template>
<script lang="ts"></script>
<style>
.block {
margin: 20px;
}
.carousel-item {
height: 300px;
width: 400px;
background-color: var(--theme-color-dark);
color: aliceblue;
display: flex;
align-items: center;
justify-content: center;
}
</style>
Carousel API
Carousel 属性
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| height | 走马灯高度,单位 px | number | 300 |
| width | 走马灯宽度,单位 px | number | 600 |
| trigger | 指示器的触发方式 | string(click|hover) | click |
| autoplay | 是否自动切换 | boolean | true |
| interval | 自动切换的时间间隔，单位为毫秒 | number | 3000 |
| indicator-position | 指示器的位置 | string(outside|none) | — |
| arrow | 切换箭头的显示时机 | string（always|hover|never） | hover |