Data
Carousel
Componente carosello per scorrere una collezione di elementi con navigazione, autoplay e supporto responsive.
Import
import { Carousel } from '@pzeta/vue-components'
Esempio Base
Props
| Prop | Tipo | Default | Descrizione |
|---|---|---|---|
value | unknown[] | [] | Array di elementi da visualizzare |
page | number | 0 | Pagina corrente (supporta v-model:page) |
numVisible | number | 1 | Numero di elementi visibili per pagina |
numScroll | number | 1 | Numero di elementi da scorrere ad ogni navigazione |
responsiveOptions | CarouselResponsiveOptions[] | [] | Opzioni responsive per breakpoint |
orientation | 'horizontal' | 'vertical' | 'horizontal' | Orientamento del carosello |
verticalViewPortHeight | string | '300px' | Altezza viewport in modalità verticale |
circular | boolean | false | Navigazione circolare (loop infinito) |
autoplayInterval | number | 0 | Intervallo autoplay in ms (0 = disabilitato) |
showNavigators | boolean | true | Mostra i pulsanti di navigazione prev/next |
showIndicators | boolean | true | Mostra gli indicatori di pagina |
containerClass | ClassValue | '' | Classe CSS aggiuntiva per il viewport |
contentClass | ClassValue | '' | Classe CSS aggiuntiva per il contenuto |
indicatorsContentClass | ClassValue | '' | Classe CSS aggiuntiva per gli indicatori |
prevButtonProps | object | — | Props aggiuntivi per il pulsante prev |
nextButtonProps | object | — | Props aggiuntivi per il pulsante next |
CarouselResponsiveOptions
| Proprietà | Tipo | Descrizione |
|---|---|---|
breakpoint | string | Breakpoint CSS (es. '768px') |
numVisible | number | Numero di elementi visibili sotto questo breakpoint |
numScroll | number | Numero di elementi da scorrere sotto questo breakpoint |
Emits
| Evento | Payload | Descrizione |
|---|---|---|
update:page | number | Emesso al cambio di pagina (usabile con v-model:page) |
Slot
| Slot | Scope | Descrizione |
|---|---|---|
item | { data: unknown, index: number } | Template per ogni elemento del carosello |
header | — | Contenuto nell'header del carosello |
footer | — | Contenuto nel footer del carosello |
previcon | — | Icona custom per il pulsante precedente |
nexticon | — | Icona custom per il pulsante successivo |
empty | — | Contenuto mostrato quando value e' vuoto |
Esempi
Carosello Circolare con Autoplay
Carosello Verticale
Con Header e Footer
Accessibilita'
- I pulsanti prev/next hanno
aria-labellocalizzati tramite@pzeta/vue-i18n - Gli indicatori di pagina hanno
aria-labelcon il numero di pagina - I pulsanti sono disabilitati (
disabled) quando la navigazione non e' possibile (modalita' non circolare) - Il DOM e' navigabile da tastiera tramite gli elementi
<button>nativi
TypeScript
import type { CarouselProps, CarouselResponsiveOptions } from '@pzeta/vue-components'
const responsiveOptions: CarouselResponsiveOptions[] = [
{ breakpoint: '1024px', numVisible: 3, numScroll: 1 },
{ breakpoint: '768px', numVisible: 2, numScroll: 1 },
{ breakpoint: '560px', numVisible: 1, numScroll: 1 },
]