Galleria

1<script setup lang="ts">2import { Galleria } from '@vitral/vue';3import { ref } from 'vue';4 5const photos = [1011, 1012, 1013, 1014, 1015, 1016, 1018, 1019].map((id, i) => ({ id, alt: `Photograph ${i + 1}` }));6const index = ref(0);7</script>8 9<template>10    <Galleria v-model:active-index="index" :value="photos" :num-visible="5" show-item-navigators aria-label="Photographs" style="max-width: 40rem">11        <template #item="{ item }">12            <img width="800" height="450" :src="`https://picsum.photos/id/${(item as { id: number }).id}/800/450`" :alt="(item as { alt: string }).alt" style="display: block; width: 100%; height: auto" />13        </template>14        <template #thumbnail="{ item }">15            <img width="120" height="80" :src="`https://picsum.photos/id/${(item as { id: number }).id}/120/80`" alt="" style="display: block; width: 100%; height: auto" />16        </template>17        <template #caption="{ item }">{{ (item as { alt: string }).alt }}</template>18    </Galleria>19</template>

1<script setup lang="ts">2import { Galleria, SelectButton, StackPanel, transitionPresets, type TransitionPreset } from '@vitral/vue';3import { ref } from 'vue';4 5const photos = [1011, 1012, 1013, 1014, 1015, 1016, 1018, 1019].map((id, i) => ({ id, alt: `Photograph ${i + 1}` }));6const shown = ref(0);7const preset = ref<TransitionPreset>('fade');8const presetOptions = transitionPresets.map((value) => ({ label: value[0]!.toUpperCase() + value.slice(1), value }));9</script>10 11<template>12    <StackPanel spacing="0.75rem" style="flex: 1 1 100%; min-width: 0">13        <SelectButton v-model="preset" :options="presetOptions" option-label="label" option-value="value" size="small" :allow-empty="false" aria-label="Transition" />14        <Galleria15            v-model:active-index="shown"16            :value="photos"17            :transition="preset"18            :num-visible="5"19            show-item-navigators20            aria-label="Photographs, with a transition"21            style="max-width: 40rem"22        >23            <template #item="{ item }">24                <img :src="`https://picsum.photos/id/${(item as { id: number }).id}/800/450`" :alt="(item as { alt: string }).alt" width="800" height="450" style="display: block; width: 100%; height: auto" />25            </template>26            <template #thumbnail="{ item }">27                <img :src="`https://picsum.photos/id/${(item as { id: number }).id}/120/80`" alt="" width="120" height="80" style="display: block; width: 100%; height: auto" />28            </template>29        </Galleria>30    </StackPanel>31</template>

1<script setup lang="ts">2import { Galleria } from '@vitral/vue';3 4const photos = [1011, 1012, 1013, 1014, 1015, 1016, 1018, 1019].map((id, i) => ({ id, alt: `Photograph ${i + 1}` }));5</script>6 7<template>8    <Galleria :value="photos" :show-thumbnails="false" show-indicators auto-play :transition-interval="3000" aria-label="Photographs, rotating" style="max-width: 32rem">9        <template #item="{ item }">10            <img width="640" height="360" :src="`https://picsum.photos/id/${(item as { id: number }).id}/640/360`" :alt="(item as { alt: string }).alt" style="display: block; width: 100%; height: auto" />11        </template>12    </Galleria>13</template>

1<script setup lang="ts">2import { Button, Galleria } from '@vitral/vue';3import { ref } from 'vue';4 5const photos = [1011, 1012, 1013, 1014, 1015, 1016, 1018, 1019].map((id, i) => ({ id, alt: `Photograph ${i + 1}` }));6const visible = ref(false);7const index = ref(0);8</script>9 10<template>11    <Button label="Open gallery" icon="image" @click="visible = true" />12    <Galleria v-model:visible="visible" v-model:active-index="index" :value="photos" full-screen show-item-navigators circular aria-label="Photographs, full screen">13        <template #item="{ item }">14            <img width="1200" height="675" :src="`https://picsum.photos/id/${(item as { id: number }).id}/1200/675`" :alt="(item as { alt: string }).alt" style="display: block; width: 100%; height: auto" />15        </template>16        <template #thumbnail="{ item }">17            <img width="120" height="80" :src="`https://picsum.photos/id/${(item as { id: number }).id}/120/80`" alt="" style="display: block; width: 100%; height: auto" />18        </template>19    </Galleria>20</template>