ovdashboard/ui/src/components/ImageCarousel.vue

<template>
  <v-carousel
    cycle
    :interval="speed"
    :height="height"
    :show-arrows="false"
    touchless
    hide-delimiters
  >
    <v-carousel-item
      v-for="url in urls"
      :key="url"
      :src="url"
      :contain="contain"
    />
  </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({ default: 300 })
  private readonly height!: number;

  @Prop({ default: false })
  private readonly contain!: boolean;

  @Prop({ required: true })
  private readonly 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>