Carousel 轮播

用于展示多张图片或内容的轮播组件，支持自动播放、滑动与淡出两种切换效果。

基础用法

幻灯片 1

幻灯片 2

幻灯片 3

基础轮播，支持箭头和点导航

vue

<script setup lang="ts">
import { ACarousel } from "@lite-code/aui-vue";

const slides = [
  {
    label: "幻灯片 1",
    color: "linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%)",
  },
  {
    label: "幻灯片 2",
    color: "linear-gradient(135deg, #ec4899 0%, #f97316 100%)",
  },
  {
    label: "幻灯片 3",
    color: "linear-gradient(135deg, #06b6d4 0%, #3b82f6 100%)",
  },
];
</script>

<template>
  <ACarousel>
    <div
      v-for="slide in slides"
      :key="slide.label"
      :style="{
        background: slide.color,
        height: '200px',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        color: '#fff',
        fontSize: '20px',
        fontWeight: '600',
      }"
    >
      {{ slide.label }}
    </div>
  </ACarousel>
</template>

自动播放

自动播放 1

自动播放 2

自动播放 3

自动播放 4

设置 autoplay 后自动播放，鼠标悬停时暂停

vue

<script setup lang="ts">
import { ACarousel } from "@lite-code/aui-vue";

const slides = [
  {
    label: "自动播放 1",
    color: "linear-gradient(135deg, #10b981 0%, #059669 100%)",
  },
  {
    label: "自动播放 2",
    color: "linear-gradient(135deg, #f59e0b 0%, #d97706 100%)",
  },
  {
    label: "自动播放 3",
    color: "linear-gradient(135deg, #ef4444 0%, #dc2626 100%)",
  },
  {
    label: "自动播放 4",
    color: "linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%)",
  },
];
</script>

<template>
  <ACarousel autoplay :autoplay-interval="2000">
    <div
      v-for="slide in slides"
      :key="slide.label"
      :style="{
        background: slide.color,
        height: '200px',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        color: '#fff',
        fontSize: '20px',
        fontWeight: '600',
      }"
    >
      {{ slide.label }}
    </div>
  </ACarousel>
</template>

淡出效果

淡出效果 1

淡出效果 2

淡出效果 3

设置 effect='fade' 使用淡出切换动画

vue

<script setup lang="ts">
import { ACarousel } from "@lite-code/aui-vue";

const slides = [
  {
    label: "淡出效果 1",
    color: "linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%)",
  },
  {
    label: "淡出效果 2",
    color: "linear-gradient(135deg, #06b6d4 0%, #0284c7 100%)",
  },
  {
    label: "淡出效果 3",
    color: "linear-gradient(135deg, #f97316 0%, #ea580c 100%)",
  },
];
</script>

<template>
  <ACarousel effect="fade">
    <div
      v-for="slide in slides"
      :key="slide.label"
      :style="{
        background: slide.color,
        height: '200px',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        color: '#fff',
        fontSize: '20px',
        fontWeight: '600',
      }"
    >
      {{ slide.label }}
    </div>
  </ACarousel>
</template>

API

Props

属性	类型	默认值	说明
autoplay	boolean	false	是否自动播放
autoplayInterval	number	3000	自动播放间隔（毫秒）
dots	boolean	true	是否显示底部圆点导航
arrows	boolean	true	是否显示箭头按钮（悬停时出现）
loop	boolean	true	是否循环播放
defaultIndex	number	0	默认激活的幻灯片索引（非受控）
index	number	—	当前激活的幻灯片索引（受控）
effect	'slide' | 'fade'	'slide'	切换动画效果
onChange	(index: number) => void	—	幻灯片切换回调
className	string	—	自定义 class
style	object	—	自定义样式

Slots

插槽	说明
default	每个直接子元素作为一张幻灯片