Description

Carousel 組件用於展示一系列內容項目的滑動展示器，支援自動播放、導航控制和指示器。

基本用法

Basic Carousel

First Slide

This is the first slide content

Second Slide

This is the second slide content

Third Slide

This is the third slide content

Current slide: 1

自動播放

Autoplay Carousel

Slide 1

Auto-advancing slide with timer

Slide 2

Hover to pause autoplay

Slide 3

Continues automatically

Slide 4

Last slide loops back

Current: 1 / 4

自定義內容

Carousel with Custom Content

Welcome to Our Service

Discover amazing features that will transform your workflow and boost productivity.

Welcome to Our Service

Discover amazing features that will transform your workflow and boost productivity.

Easy Integration

Seamlessly integrate with your existing tools and platforms in just a few clicks.

Easy Integration

Seamlessly integrate with your existing tools and platforms in just a few clicks.

Expert Support

24/7 customer support from our team of experts ready to help you succeed.

Expert Support

24/7 customer support from our team of experts ready to help you succeed.

API

Carousel 屬性

屬性名	說明	類型	默認值
modelValue	當前活動項目的索引	number	0
items	輪播項目陣列	CarouselItem[]	[]
autoplay	是否自動播放	boolean	false
interval	自動播放間隔時間（毫秒）	number	3000
showIndicators	是否顯示指示器	boolean	true
showNavigation	是否顯示導航箭頭	boolean	true
loop	是否循環播放	boolean	true
pauseOnHover	是否暫停自動播放在懸停時	boolean	true
duration	動畫持續時間（毫秒）	number	300
effect	動畫效果類型	'slide' | 'fade'	'slide'
height	輪播容器高度	string | number	'400px'
disabled	是否禁用	boolean	false
style	自定義樣式	StyleValue	-
class	自定義類名	string	-

CarouselItem 類型

屬性名	說明	類型	必填
id	項目唯一標識	string | number	否
content	項目內容	string	否
image	圖片 URL	string	否
alt	圖片替代文字	string	否
title	標題	string	否
description	描述	string	否
href	鏈接	string	否
target	是否在新視窗打開	'_blank' | '_self'	否
data	自定義數據	Record<string, any>	否

事件 Events

事件名	說明	回調參數
update:modelValue	更新模型值	(value: number) => void
change	項目變更事件	(current: number, previous: number) => void
item-click	項目點擊事件	(item: CarouselItem, index: number) => void
autoplay-start	自動播放開始事件	() => void
autoplay-stop	自動播放停止事件	() => void

插槽 Slots

插槽名	說明	參數
default	預設插槽	-
item	項目插槽	{ item: CarouselItem, index: number, active: boolean }
indicator	指示器插槽	{ index: number, active: boolean }
prev-button	前一個按鈕插槽	-
next-button	下一個按鈕插槽	-