Carousel 走马灯

在有限空间内，循环播放同一类型的图片、文字等内容。

基础用法

适用广泛的基础用法。

暂无内容

1

2

3

4

<template>
  <ZcCarousel height="200px">
    <ZcCarouselItem v-for="item in 4" :key="item">
      <div
        style="display: flex; align-items: center; justify-content: center; height: 100%; background: #409eff; color: #fff; font-size: 24px;"
      >
        {{ item }}
      </div>
    </ZcCarouselItem>
  </ZcCarousel>
</template>

自动播放

通过 autoplay 开启自动轮播，interval 设置间隔时间。

暂无内容

第 1 页

第 2 页

第 3 页

<template>
  <ZcCarousel height="200px" autoplay :interval="3000">
    <ZcCarouselItem v-for="item in 3" :key="item">
      <div
        style="display: flex; align-items: center; justify-content: center; height: 100%; background: #67c23a; color: #fff; font-size: 24px;"
      >
        第 {{ item }} 页
      </div>
    </ZcCarouselItem>
  </ZcCarousel>
</template>

指示器与箭头

通过 indicator-position 控制指示器位置，arrow 控制箭头显示时机。

暂无内容

1

2

3

4

<template>
  <ZcCarousel height="200px" indicator-position="outside" arrow="always">
    <ZcCarouselItem v-for="item in 4" :key="item">
      <div
        style="display: flex; align-items: center; justify-content: center; height: 100%; background: #e6a23c; color: #fff; font-size: 24px;"
      >
        {{ item }}
      </div>
    </ZcCarouselItem>
  </ZcCarousel>
</template>

Carousel API

ZcCarousel Props

参数	说明	类型	默认值
height	走马灯高度	string | number	''
initialIndex	初始状态激活的幻灯片索引	number	0
trigger	指示器触发方式	'click' | 'hover'	'click'
autoplay	是否自动播放	boolean	false
interval	自动切换的时间间隔(ms)	number	3000
indicatorPosition	指示器位置	'outside' | 'none'	'outside'
arrow	切换箭头显示时机	'always' | 'hover' | 'never'	'hover'
type	走马灯类型	'' | 'card'	''
loop	是否循环播放	boolean	true
direction	展示方向	'horizontal' | 'vertical'	'horizontal'
pauseOnHover	鼠标悬停时暂停自动播放	boolean	true

ZcCarousel Events

事件名	说明	回调参数
change	幻灯片切换时触发	(current: number, prev: number)

ZcCarousel Slots

插槽名	说明
default	幻灯片内容，放置 ZcCarouselItem

ZcCarouselItem Props

参数	说明	类型	默认值
name	幻灯片名称	string | number	—