Vitral 0.2
Mídia

Carousel

Uma trilha de itens com paginação e rotação opcional, que pausa quando pedido e enquanto você aponta para ela ou interage com ela.

Testado com WAI-ARIA

Importação

main.ts
import { Carousel } from '@vitral/vue';

Vários de uma vez

<script setup lang="ts">import { Carousel } from '@vitral/vue'; const photos = [    { id: 1015, title: 'River valley' },    { id: 1016, title: 'Canyon' },    { id: 1018, title: 'Mountains' },    { id: 1019, title: 'Coast' },    { id: 1020, title: 'Bear' },    { id: 1021, title: 'Fog' },    { id: 1022, title: 'Aurora' },    { id: 1024, title: 'Vulture' }]; const responsive = [    { breakpoint: '1024px', numVisible: 2, numScroll: 2 },    { breakpoint: '640px', numVisible: 1, numScroll: 1 }];</script> <template>    <Carousel :value="photos" :num-visible="3" :num-scroll="3" :responsive-options="responsive" aria-label="Landscapes">        <template #item="{ data }">            <figure style="margin: 0 0.5rem">                <img width="400" height="260" :src="`https://picsum.photos/id/${(data as { id: number }).id}/400/260`" :alt="(data as { title: string }).title" style="display: block; width: 100%; border-radius: 8px; height: auto" />                <figcaption style="font-size: 0.75rem; color: var(--vt-text-muted-color)">{{ (data as { title: string }).title }}</figcaption>            </figure>        </template>    </Carousel></template>

Circular, com rotação

<script setup lang="ts">import { Carousel } from '@vitral/vue'; const photos = [    { id: 1015, title: 'River valley' },    { id: 1016, title: 'Canyon' },    { id: 1018, title: 'Mountains' },    { id: 1019, title: 'Coast' },    { id: 1020, title: 'Bear' },    { id: 1021, title: 'Fog' },    { id: 1022, title: 'Aurora' },    { id: 1024, title: 'Vulture' }];</script> <template>    <Carousel :value="photos" circular :autoplay-interval="3000" aria-label="Featured photo">        <template #item="{ data }">            <img width="900" height="360" :src="`https://picsum.photos/id/${(data as { id: number }).id}/900/360`" :alt="(data as { title: string }).title" style="display: block; width: 100%; border-radius: 8px; height: auto" />        </template>    </Carousel></template>

Vertical

<script setup lang="ts">import { Carousel } from '@vitral/vue'; const photos = [    { id: 1015, title: 'River valley' },    { id: 1016, title: 'Canyon' },    { id: 1018, title: 'Mountains' },    { id: 1019, title: 'Coast' },    { id: 1020, title: 'Bear' },    { id: 1021, title: 'Fog' },    { id: 1022, title: 'Aurora' },    { id: 1024, title: 'Vulture' }];</script> <template>    <Carousel :value="photos" orientation="vertical" :num-visible="2" vertical-view-port-height="22rem" :show-indicators="false" aria-label="Vertical photos" style="max-width: 20rem">        <template #item="{ data }">            <img width="320" height="200" :src="`https://picsum.photos/id/${(data as { id: number }).id}/320/200`" :alt="(data as { title: string }).title" style="display: block; width: 100%; height: 100%; object-fit: cover; padding: 0.25rem 0; box-sizing: border-box" />        </template>    </Carousel></template>

Transições, um de cada vez

O padrão desliza a faixa inteira, e é isso que permite a um carousel mostrar vários de uma vez. Todos os outros presets mostram um só e o animam onde ele está, por isso valem apenas quando numVisible é 1. São os mesmos presets que o Galleria usa.

<script setup lang="ts">import { Carousel, SelectButton, StackPanel, transitionPresets, type TransitionPreset } from '@vitral/vue';import { ref } from 'vue'; const photos = [    { id: 1015, title: 'River valley' },    { id: 1016, title: 'Canyon' },    { id: 1018, title: 'Mountains' },    { id: 1019, title: 'Coast' },    { id: 1020, title: 'Bear' },    { id: 1021, title: 'Fog' },    { id: 1022, title: 'Aurora' },    { id: 1024, title: 'Vulture' }]; const preset = ref<TransitionPreset>('zoom');const presetOptions = transitionPresets.filter((p) => p !== 'none').map((value) => ({ label: value[0]!.toUpperCase() + value.slice(1), value }));</script> <template>    <StackPanel spacing="0.75rem" style="flex: 1 1 100%; min-width: 0">        <SelectButton v-model="preset" :options="presetOptions" option-label="label" option-value="value" size="small" :allow-empty="false" aria-label="Transition" />        <Carousel :value="photos" :num-visible="1" :num-scroll="1" :transition="preset" aria-label="Photographs, with a transition">            <template #item="{ data }">                <figure style="margin: 0">                    <img width="800" height="400" :src="`https://picsum.photos/id/${(data as { id: number }).id}/800/400`" :alt="(data as { title: string }).title" style="display: block; width: 100%; height: auto" />                    <figcaption style="font-size: 0.75rem; color: var(--vt-text-muted-color)">{{ (data as { title: string }).title }}</figcaption>                </figure>            </template>        </Carousel>    </StackPanel></template>

API

Lido de packages/vue/src/components/Carousel/types.ts, então diz o que o componente aceita de fato.

Props

NomeTipoDescrição
valueany[]—
numVisiblenumberItens mostrados de uma vez. O padrão é 1.
numScrollnumberItens movidos por passo. O padrão é 1.
responsiveOptionsCarouselResponsiveOption[]Menos itens em telas menores.
orientation'horizontal' | 'vertical'—
verticalViewPortHeightstringA altura da área visível quando vertical. O padrão é `'20rem'`.
circularbooleanDá a volta: o último item é seguido pelo primeiro. Ligado por padrão — uma galeria que para de repente no fim faz o leitor voltar por tudo o que acabou de ver para chegar à outra ponta.
autoplayIntervalnumberMilissegundos entre passos automáticos; 0 (o padrão) desliga.
showNavigatorsbooleanO padrão é true.
showIndicatorsbooleanO padrão é true.
ariaLabelstringDá nome ao carrossel.
transitionTransitionPreset | 'slide'Como um slide dá lugar ao próximo. O padrão, `'slide'`, move a faixa inteira, o que permite ao carrossel mostrar vários de uma vez; todos os outros presets mostram um por vez e o animam no lugar, então só valem quando `numVisible` é 1.

Mais pt, dt e unstyled de BaseProps; veja pass-through e modo sem estilo.

Emits

EventoPayloadDescrição
update:pagepage: number—

Slots

NomeProps do slotDescrição
item(props: { data: unknown; index: number })—
header——
footer——
empty——

Usado nestes templates