TCarousel / 走马灯

Carousel cycles through images or content items with slide/fade animations. Supports auto-play, indicators (dots/bars/thumbs), controls, and pause-on-hover. / 走马灯以滑动或淡入淡出动画循环展示图片或内容，支持自动播放、多种指示器样式、控制按钮和悬停暂停。

Props / 属性

Prop	Type / 类型	Default / 默认值	Description / 说明
items	CarouselItem[]	—	Carousel items
interval	number	—	Auto-play interval (ms), 0 to disable
animation	'slide' | 'fade'	'slide'	Animation type
indicators	boolean	true	Show indicators
indicatorStyle	'default' | 'dot' | 'thumb'	'default'	Indicator style
controls	boolean	true	Show prev/next controls
wrap	boolean	true	Loop playback
pauseOnHover	boolean	false	Pause on hover

Basic Usage / 基础用法

<script setup lang="ts">
import { TCarousel } from '@gulcc/tabler-vue'

const slides = [
  { image: '/slide1.jpg', title: 'Slide 1' },
  { image: '/slide2.jpg', title: 'Slide 2' },
]
</script>

<template>
  <TCarousel :items="slides" />
</template>

Tips / 避坑指南

• interval=0 disables auto-play — user must manually navigate
• wrap=false stops at the first/last item (no loop)
• indicatorStyle="thumb" shows thumbnail previews as indicators
• Items can have html field for fully custom content