Kits UI🌟

Appearance

On this page

Carousel 走马灯 ​

基础用法 ​

使用k-carousel来定义一个走马灯。

箭头 ​

使用 arrow 属性来控制左右箭头是否显示

垂直排列 ​

使用 direction 属性来控制水平还是垂直排列, 默认为水平 horizontal。

间隔时间 ​

使用 interval 属性来控制切换的间隔时间,单位是毫秒, 最小值 1200, 最大值 15000

指示器 ​

使用 indicators 属性来控制指示器是否显示。 该属性值为 Boolean 类型。

Carousel API ​

属性名说明类型可选值默认值
defaultValue默认位置number--------------------1
arrow箭头状态boolean--------------------true
direction轮播方向stringhorizontal/verticalhorizontal
interval轮播的时间间隔(min: 1200, max: 15000)number--------------------2000
autoplay是否自动播放boolean--------------------true
indicators指示器状态boolean--------------------true
事件名说明回调参数
change幻灯片切换时触发function(currentIndex)
事件名说明类型
prev切换上一页触发function()
next切换下一页触发function()
moveTo移动到某一页function()
vue
<template>
  <k-carousel ref="kCarousel">
    <div v-for="item in 5" :key="item" class="content">
      {{ item }}
    </div>
  </k-carousel>
  <k-button @click="jump">点击跳转第四页</k-button>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const kCarousel = ref();

const jump = () => {
  kCarousel.value.moveTo(4);
};
</style>
<template>
  <k-carousel ref="kCarousel">
    <div v-for="item in 5" :key="item" class="content">
      {{ item }}
    </div>
  </k-carousel>
  <k-button @click="jump">点击跳转第四页</k-button>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const kCarousel = ref();

const jump = () => {
  kCarousel.value.moveTo(4);
};
</style>