<template>
  <div>
    <h5 :style="{ color: widget.style.headingColor }">
      {{ widget.text.heading }}
    </h5>
    <span :style="{ color: widget.style.textcolor }">{{
      widget.text.subheading
    }}</span>

<!--    <b-carousel-->
<!--      id="carousel-1"-->
<!--      v-model="slide"-->
<!--      :interval="0"-->
<!--      controls-->
<!--      indicators-->
<!--      background="#ababab"-->
<!--      img-width="1024"-->
<!--      img-height="600"-->
<!--      style="text-shadow: 1px 1px 2px #333"-->
<!--    >-->
<!--      &lt;!&ndash; Text slides with image &ndash;&gt;-->
<!--      <b-carousel-slide-->
<!--        v-for="image in widget.text.images"-->
<!--        carousel-caption="asfdasf"-->
<!--        :img-src="image.imageUrl"-->
<!--      ></b-carousel-slide>-->
<!--    </b-carousel>-->

    <p class="mt-4" style="text-align: center">
      {{ widget.text.images[slide].caption }}<br />
    </p>
  </div>
</template>

<script>
export default {
  name: "image_slider_widget",
  props: {
    widget: Object,
  },
  data() {
    return {
      slide: 0,
    };
  },
  methods: {},
};
</script>

<style scoped></style>
