Carousel

Slide indices begin at 0. Embla handles pointer and touch dragging. Inactive slides are inert. No autoplay. Items require stable IDs.

Preview

Open in the playground

Usage

CarouselExample.vueVue / TS

<script setup lang="ts">
import { ref } from 'vue'
import { FzCarousel } from '@chrisdalbano/forza-ui'
const slide = ref<number>(0)
const builds = [
  { id: 1, name: 'Guardian' },
  { id: 2, name: 'Duelist' },
]
</script>

<template>
  <FzCarousel v-model="slide" :items="builds" label="Builds">
    <template #default="{ item }">{{ item.name }}</template>
  </FzCarousel>
</template>

TypeScript exampleSource you can use.

Import the shared stylesheet once and wrap your app in .fz-theme. See installation.

Props

Name	Type	Required	Default
items	readonly T[]	Yes	None
label	string	Yes	None
modelValue	number | undefined	No	0

Events and state

v-model: number (0-based)

• update:modelValue: [value: number]

Slots

default({item,index})

Add from source

forza add carousel

Set up the CLI first. Generated API tables come from the Vue source, using Vue Language Tools.