Carousel

Componente base do Nuxt UI (UCarousel, sobre Embla), ainda não internalizado no EletroDS — confira o comportamento antes de usar no ME.

O Carousel exibe itens num trilho horizontal com navegação por setas (arraste opcional). No ME aparece no documento de Produto › Itens relacionados, com os mesmos cards do Card View dentro.

Uso no ME (1 card por slide)

Cada slide é um MeCardView com um item (o mesmo card do grid), não um card custom — assim o carrossel e o modo grid ficam idênticos.

<template>
  <UCarousel
    v-slot="{ item: card }"
    :items="relCards"
    arrows
    prev-icon="i-lucide-chevron-left"
    next-icon="i-lucide-chevron-right"
    :ui="{ item: 'basis-80', container: 'gap-4', prev: 'start-1 sm:start-1', next: 'end-1 sm:end-1' }"
  >
    <MeCardView :data="[card]" selectable favorite>
      <template #card-extra-content><!-- fornecedor + tags --></template>
    </MeCardView>
  </UCarousel>
</template>

Setas dentro do trilho: o default -start-12/-end-12 joga as setas para fora da tela → sobrescreva prev/next no :ui (start-1/end-1).
Largura do slide: :ui="{ item: 'basis-80' }" (≈320px) pra caber o card com stepper + carrinho.
Esconder o header de select-all do bloco por slide via CSS (:deep(.size-full) > :first-child { display: none }). Ver docs/documento-anatomia-me.md §9.

API

Props

Prop	Default	Type
`items`	-	`T[]` Itens do trilho (render no slot default).
`arrows`	`false`	`boolean` Mostra setas prev/next.
`dots`	`false`	`boolean` Mostra os pontos de navegação.
`orientation`	`'horizontal'`	`'horizontal' \| 'vertical'`
`prev` / `next`	-	`ButtonProps` Config dos botões de seta.
`prev-icon` / `next-icon`	`arrow-left/right`	`string`
`loop` · `autoplay` · `auto-scroll` · `dragFree`	`false`	plugins Embla.
`ui`	-	`{ root?, viewport?, container?, item?, controls?, arrows?, prev?, next?, dots?, dot? }`

Slots

Slot	Type
`default`	`{ item, index }` — cada slide.

Emits

Event	Type
`select`	`[selectedIndex: number]`

Acessibilidade

Setas são button com nome acessível (Anterior/Próximo), focáveis; foco visível; alvo ≥ 44px.
Conteúdo do slide (o card) mantém sua própria semântica (título como heading, ações rotuladas).
Não usar autoplay em conteúdo essencial sem controle de pausa.

Onde se aplica

Estrutura de Documento

Veja tambémCard Estrutura de Documento