<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>