54 lines
1.1 KiB
Vue
54 lines
1.1 KiB
Vue
<script setup lang="ts">
|
|
import { BandModel } from '@/data/models/acts/bandModel';
|
|
import { useBandStore } from '@/stores/band.store';
|
|
|
|
const bandStore = useBandStore()
|
|
|
|
defineProps({
|
|
band: {
|
|
type: BandModel,
|
|
required: true
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<v-row>
|
|
<v-col>
|
|
<v-skeleton-loader
|
|
type="image"
|
|
:loading="bandStore.fetchInProgress"
|
|
>
|
|
<v-carousel
|
|
show-arrows
|
|
hide-delimiter-background
|
|
hide-delimiters
|
|
height="900"
|
|
>
|
|
<template #prev="{ props }">
|
|
<v-btn
|
|
variant="text"
|
|
@click="props.onClick"
|
|
icon="mdi-chevron-left"
|
|
/>
|
|
</template>
|
|
|
|
<template #next="{ props }">
|
|
<v-btn
|
|
variant="text"
|
|
@click="props.onClick"
|
|
icon="mdi-chevron-right"
|
|
/>
|
|
</template>
|
|
|
|
|
|
<v-carousel-item
|
|
v-for="image in band.images"
|
|
:src="'http://localhost:3000/static/' + image"
|
|
cover
|
|
/>
|
|
</v-carousel>
|
|
</v-skeleton-loader>
|
|
</v-col>
|
|
</v-row>
|
|
</template> |