Carousel

Matches Arco Carousel with dot indicators by default. See the Element Plus docs for props.

Basic Carousel

Colored slides demonstrate navigation with arrows and indicators.

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>

Outside Indicators

Outside indicators map to 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>

Card Mode

Card mode covers Arco's card animation use case while keeping Element Plus scaling.

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>

Differences from Arco

• Arrows appear on hover and indicators switch on hover, following Element Plus defaults.
• Card-mode positioning and scaling follow Element Plus rather than Arco's perspective effect.