39 lines
789 B
Vue
39 lines
789 B
Vue
|
<template>
|
||
|
|
<v-carousel
|
||
|
|
cycle
|
||
|
|
:interval="speed"
|
||
|
|
height="300"
|
||
|
|
:show-arrows="false"
|
||
|
|
touchless
|
||
|
|
hide-delimiters
|
||
|
|
>
|
||
|
|
<v-carousel-item v-for="url in image_urls" :key="url" :src="url" />
|
||
|
|
</v-carousel>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script lang="ts">
|
||
|
|
import { Component, Prop, Vue } from "vue-property-decorator";
|
||
|
|
|
||
|
|
@Component
|
||
|
|
export default class ImageCarousel extends Vue {
|
||
|
|
@Prop({ default: 10000 })
|
||
|
|
private readonly speed!: number;
|
||
|
|
|
||
|
|
@Prop({ required: true })
|
||
|
|
private readonly image_urls!: Array<string>;
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.v-window {
|
||
|
|
&-x-transition,
|
||
|
|
&-x-reverse-transition,
|
||
|
|
&-y-transition,
|
||
|
|
&-y-reverse-transition {
|
||
|
|
&-enter-active,
|
||
|
|
&-leave-active {
|
||
|
|
transition: 1.5s cubic-bezier(0.25, 0.8, 0.5, 1) !important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|