ovdashboard/ui/src/components/ImageCarousel.vue

<template>
  <v-carousel
    cycle
    v-if="urls.length > 0"
    :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, Vue } from "@/ovd-vue";

@Component
export default class ImageCarousel extends Vue {
  public urls: string[] = require("@/assets/image_testdata.json");
  public height = 300;
  public contain = false;
  public speed = 10000;

  public created(): void {
    super.created();
  }

  public beforeDestroy(): void {
    super.beforeDestroy();
  }

  protected update(): void {
    // Update Images
    this.$ovdashboard.api_get_list("image/list", (names) => {
      this.urls = names.map((name: string) =>
        this.$ovdashboard.api_url(`image/get/${name}`),
      );
    });

    // Update Image Config
    type ImageConfig = {
      height: number;
      contain: boolean;
      speed: number;
    };

    this.$ovdashboard.api_get_object<ImageConfig>("image/config", (cfg) => {
      this.height = cfg.height;
      this.contain = cfg.contain;
      this.speed = cfg.speed;
    });
  }
}
</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>