走马灯 Carousel

对应 Arco Carousel，默认指示器映射为圆点。 属性用法见 Element Plus 文档。

基础轮播

使用纯色块展示轮播，通过箭头或指示器切换。

Slide 1

Slide 2

Slide 3

<script setup lang="ts">
const slides = ['var(--el-color-primary)', 'var(--el-color-success)', 'var(--el-color-warning)']
</script>

<template>
  <el-carousel height="200px" :autoplay="false" trigger="click" arrow="always" style="width: 100%">
    <el-carousel-item v-for="(color, index) in slides" :key="color">
      <div :style="{ background: color, height: '100%', display: 'grid', placeItems: 'center', color: 'var(--el-color-white)' }">Slide {{ index + 1 }}</div>
    </el-carousel-item>
  </el-carousel>
</template>

外部指示器

indicator-position="outside" 对应 Arco 的 outer。

Slide 1

Slide 2

Slide 3

<script setup lang="ts">
const slides = ['var(--el-color-primary)', 'var(--el-color-success)', 'var(--el-color-warning)']
</script>

<template>
  <el-carousel height="200px" :autoplay="false" indicator-position="outside" trigger="click" style="width: 100%">
    <el-carousel-item v-for="(color, index) in slides" :key="color">
      <div :style="{ background: color, height: '100%', display: 'grid', placeItems: 'center', color: 'var(--el-color-white)' }">Slide {{ index + 1 }}</div>
    </el-carousel-item>
  </el-carousel>
</template>

卡片模式

type="card" 对应 Arco 的 card 动画场景，保留 Element Plus 的缩放计算。

Slide 1

Slide 2

Slide 3

<script setup lang="ts">
const slides = ['var(--el-color-primary)', 'var(--el-color-success)', 'var(--el-color-warning)']
</script>

<template>
  <el-carousel height="200px" :autoplay="false" type="card" style="width: 100%">
    <el-carousel-item v-for="(color, index) in slides" :key="color">
      <div :style="{ background: color, height: '100%', display: 'grid', placeItems: 'center', color: 'var(--el-color-white)' }">Slide {{ index + 1 }}</div>
    </el-carousel-item>
  </el-carousel>
</template>

与 Arco 的差异

• 箭头默认悬停显示，指示器默认悬停切换，沿用 Element Plus 默认值。
• 卡片模式的位置和缩放保留 Element Plus 计算方式，与 Arco 透视效果不同。