Preview Updated 2026-05-10

Carousel

Horizontal carousel for images or custom content, with autoplay, looping, indicators, and prev/next controls.

Basic usage

items accepts an { src, alt } list to render images; autoplay plus interval advances slides automatically and pauses on hover.

背景

<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

Prop	Type	Default	Description
`items`	`CarouselItem[]`	`—`	Carousel item list
`value` / `modelValue`	`number`	`—`	Controlled current index
`defaultValue`	`number`	`0`	Uncontrolled initial index
`autoplay`	`boolean`	`false`	Autoplay
`interval`	`number`	`4000`	Autoplay interval (ms)
`loop`	`boolean`	`true`	Loop playback
`controls`	`boolean`	`true`	Show prev/next buttons
`indicators`	`boolean`	`true`	Show bottom indicators
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Viewport height tier

Events: onChange(index) — fires when the current index changes.