Carousel

Galeria de slides com controles de navegação e indicadores.

Uso

<script setup lang="ts">
import { Carousel } from '@halfbyte/maka'

const slides = ['Slide 1', 'Slide 2', 'Slide 3']
</script>

<template>
  <Carousel :slide-count="slides.length">
    <template v-for="(slide, i) in slides" :key="i" #[`slide-${i}`]>
      <div style="height: 200px; display: flex; align-items: center; justify-content: center; background: #f3f4f6; border-radius: 8px">
        {{ slide }}
      </div>
    </template>
  </Carousel>
</template>

Com autoplay

<Carousel :slide-count="3" :autoplay="true" :loop="true">
  <template #slide-0>…</template>
  <template #slide-1>…</template>
  <template #slide-2>…</template>
</Carousel>

Múltiplos por view

<Carousel :slide-count="6" :slides-per-view="3" spacing="16px">
  <template v-for="i in 6" :key="i" #[`slide-${i-1}`]>
    <div style="padding: 8px">Item {{ i }}</div>
  </template>
</Carousel>

Props

Prop	Tipo	Padrão
slideCount	number	obrigatório
loop	boolean	false
autoplay	boolean	false
slidesPerView	number	1
spacing	string	"0px"
showIndicators	boolean	true
showControls	boolean	true

Slots

Slot	Descrição
slide-{i}	Conteúdo do slide de índice i (0-based)

Events

Evento	Payload	Descrição
pageChange	number	Emitido ao mudar de slide