<template>
  <div>
    <heading
      :ts="formBody.sharedStyle.heading"
      :ls="widget.style.heading"
      :d="widget.style.heading.defaultStyle"
      >{{ widget.text.heading }}
    </heading>
    <heading
      :ts="formBody.sharedStyle.subHeading"
      :ls="widget.style.subHeading"
      :d="widget.style.subHeading.defaultStyle"
      >{{ widget.text.subHeading }}
    </heading>

    <v-carousel hide-delimiter-background light>
      <v-carousel-item
        v-for="(image, index) in widget.text.images"
        :key="index"
      >
        <v-img :src="image.url" />
        <p class="mt-4" style="text-align: center">{{ image.caption }}<br /></p>
      </v-carousel-item>
    </v-carousel>
  </div>
</template>

<script>
import Heading from "@/components/widgets/components/heading";
export default {
  name: "image_slider_widget",
  components: { Heading },
  props: {
    widget: Object,
    formBody: Object,
  },
  data() {
    return {
      slide: 0,
    };
  },
  methods: {},
};
</script>

<style scoped></style>
