开发预览更新于 2026-05-10

Carousel 轮播

横向轮播图片或自定义内容，支持自动播放、循环、指示点、左右控制。

基础用法

items 接收 { src, alt } 列表渲染图片；autoplay 配合 interval 自动滚动，鼠标悬停时暂停。

背景

<script setup lang="ts">
import { CfCarousel, type CarouselItem } from '@chufix-design/vue';

const items: CarouselItem[] = [
  { src: 'https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?w=800&h=300&fit=crop', alt: '场景 1' },
  { src: 'https://images.unsplash.com/photo-1518837695005-2083093ee35b?w=800&h=300&fit=crop', alt: '场景 2' },
  { src: 'https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?w=800&h=300&fit=crop', alt: '场景 3' },
];
</script>

<template>
  <CfCarousel :items="items" autoplay :interval="3000" />
</template>

<script setup>
import { CfCarousel } from '@chufix-design/vue';

const items= [
  { src: 'https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?w=800&h=300&fit=crop', alt: '场景 1' },
  { src: 'https://images.unsplash.com/photo-1518837695005-2083093ee35b?w=800&h=300&fit=crop', alt: '场景 2' },
  { src: 'https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?w=800&h=300&fit=crop', alt: '场景 3' },
];
</script>

<template>
  <CfCarousel :items="items" autoplay :interval="3000" />
</template>

<CfCarousel items={items} autoplay interval={3000} />

<CfCarousel items={items} autoplay interval={3000} />

API

属性	类型	默认值	说明
`items`	`CarouselItem[]`	`—`	轮播项列表
`value` / `modelValue`	`number`	`—`	受控当前索引
`defaultValue`	`number`	`0`	非受控初始索引
`autoplay`	`boolean`	`false`	自动播放
`interval`	`number`	`4000`	自动播放间隔（毫秒）
`loop`	`boolean`	`true`	循环播放
`controls`	`boolean`	`true`	显示左右切换按钮
`indicators`	`boolean`	`true`	显示底部指示点
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	视口高度档位

事件：onChange(index) —— 当前索引变化时触发。