41 lines
1.1 KiB
Vue
41 lines
1.1 KiB
Vue
|
<template>
|
||
|
|
<div class="swipeable-thumbnails-view">
|
||
|
|
<v-responsive :aspect-ratio="16 / 9" class="ma-0 pa-0">
|
||
|
|
<v-carousel height="100%" hide-delimiters show-arrows-on-hover v-model="currentIndex">
|
||
|
|
<v-carousel-item v-for="(item,index) in items" :key="item.event.getId()">
|
||
|
|
<ThumbnailView :item="items[index]" :previewOnly="true" />
|
||
|
|
</v-carousel-item>
|
||
|
|
</v-carousel>
|
||
|
|
</v-responsive>
|
||
|
|
<div class="indicator-container">
|
||
|
|
<div v-for="(item,index) in items" :key="index" :class="{'indicator': true, 'current': index == currentIndex}" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import messageMixin from "../../messages/messageMixin";
|
||
|
|
import ThumbnailView from '../../file_mode/ThumbnailView.vue';
|
||
|
|
|
||
|
|
export default {
|
||
|
|
mixins: [messageMixin],
|
||
|
|
components: { ThumbnailView },
|
||
|
|
props: {
|
||
|
|
items: {
|
||
|
|
type: Array,
|
||
|
|
default: function () {
|
||
|
|
return []
|
||
|
|
}
|
||
|
|
},
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
currentIndex: 0,
|
||
|
|
};
|
||
|
|
},
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss">
|
||
|
|
@import "@/assets/css/chat.scss";
|
||
|
|
</style>
|