You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
123 lines
2.4 KiB
123 lines
2.4 KiB
<template>
|
|
<v-spacer class="wrapper width-100vw align-center py-7 mb-13 neutrals darken-1" height="100%">
|
|
<v-carousel hide-delimiters class="py-5" width="100%" height="100%">
|
|
<template v-for="(video, i) in exhibition.videos">
|
|
<v-carousel-item v-if="exhibition.videos.length > 0" :key="i">
|
|
<v-row align="center" justify="center">
|
|
<iframe :width="$vuetify.breakpoint.smAndUp ? 640 : 320" :height="$vuetify.breakpoint.smAndUp ? 360 : 180"
|
|
:src="video" title="YouTube video player" frameborder="0"
|
|
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
|
|
allowfullscreen></iframe>
|
|
</v-row>
|
|
</v-carousel-item>
|
|
</template>
|
|
<template v-for="(image, index) in exhibition.gallery.images">
|
|
<v-carousel-item v-if="exhibition.gallery"
|
|
:key="'image'+index">
|
|
<v-row align="center" justify="center">
|
|
<v-img :src="image" contain :width="$vuetify.breakpoint.smAndUp ? 640 : 320"
|
|
:height="$vuetify.breakpoint.smAndUp ? 360 : 180"></v-img>
|
|
</v-row>
|
|
</v-carousel-item>
|
|
</template>
|
|
</v-carousel>
|
|
</v-spacer>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "ExhibitionPhotoVideoGallery",
|
|
props: {
|
|
exhibition: {
|
|
type: Object,
|
|
default: () => ({
|
|
gallery: {
|
|
videos: [],
|
|
images: [],
|
|
},
|
|
}),
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
:deep() {
|
|
.wrapper {
|
|
padding: 0 27px;
|
|
}
|
|
|
|
.v-responsive {
|
|
&__content {
|
|
display: flex;
|
|
}
|
|
}
|
|
|
|
.v-carousel {
|
|
position: initial;
|
|
padding-left: 20px;
|
|
padding-right: 20px;
|
|
}
|
|
|
|
.v-window {
|
|
&__container {
|
|
position: initial;
|
|
}
|
|
|
|
&__prev {
|
|
margin: 0;
|
|
}
|
|
|
|
&__next {
|
|
margin: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
iframe {
|
|
width: 100% !important;
|
|
height: 50vw !important;
|
|
min-height: 180px;
|
|
}
|
|
|
|
@media (min-width: 768px) {
|
|
:deep() {
|
|
.wrapper {
|
|
padding: 0 44px;
|
|
}
|
|
|
|
.v-window {
|
|
&__prev {
|
|
left: 12px;
|
|
}
|
|
|
|
&__next {
|
|
right: 12px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@media (min-width: 1366px) {
|
|
:deep() {
|
|
.wrapper {
|
|
padding: 0 71px;
|
|
}
|
|
|
|
.v-window {
|
|
&__prev {
|
|
left: 39px;
|
|
}
|
|
|
|
&__next {
|
|
right: 39px;
|
|
}
|
|
}
|
|
|
|
iframe {
|
|
width: 640px !important;
|
|
height: 360px !important;
|
|
}
|
|
}
|
|
}
|
|
</style>
|