UnivateProperties/src/components/home/carouselSection.vue

<template>
  <!-- eslint-disable max-len -->
  <carousel
    :per-page="1"
    :mouse-drag="false"
    :autoplay="true"
    :autoplayTimeout="5000"
    :loop="true"
    :autoplayHoverPause="false"
  >
    <slide
      v-for="(car, i) in carouselList"
      :index="i"
      :key="i"
      :style="{ height:'1000px', width:'100%',  backgroundImage: 'url(' + car.image + ')',  backgroundSize: 'cover', backgroundPosition: 'center center'}"
      calss="myClass"
    >
      <div class="intro-content display-table">
        <div class="table-cell">
          <div class="container">
            <div class="row">
              <div class="col-lg-8">
                <div
                  class="price-a"
                  style="opacity:0.7; border: white solid 3px; border-radius: 15px; background-color: white;"
                >
                  <h1 class="intro-title mb-4">{{ car.header }}</h1>
                  <div class="summary-list" v-if="car.isProperty">
                    <p v-html="car.address" />
                  </div>
                  <div class="summary-list" v-else>
                    <ul class="list">
                      <li class="d-flex justify-content-between">
                        <strong>
                          <i class="fa fa-bed"></i>&nbsp&nbsp&nbspBedrooms:
                        </strong>
                        <span>{{ car.bedrooms }}</span>
                      </li>
                      <li class="d-flex justify-content-between">
                        <strong>
                          <i class="fa fa-users"></i>&nbsp&nbsp&nbspSleeps:
                        </strong>
                        <span>{{ car.sleeps }}</span>
                      </li>
                      <li class="d-flex justify-content-between">
                        <strong>
                          <i class="fa fa-calendar"></i>&nbsp&nbsp&nbspCheck in:
                        </strong>
                        <span>{{ car.arrival | toDate }}</span>
                      </li>
                      <li class="d-flex justify-content-between">
                        <strong>
                          <i class="fa fa-calendar"></i>&nbsp&nbsp&nbspCheck out:
                        </strong>
                        <span>{{ car.departure | toDate}}</span>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </slide>
  </carousel>
</template>

<script>
import { mapState, mapActions } from 'vuex';
import { Carousel, Slide } from 'vue-carousel';

export default {
  components: {
    Carousel,
    Slide,
  },
  methods: {
    ...mapActions('carousel', ['getCarouselList']),
  },
  mounted() {
    this.getCarouselList();
  },
  computed: {
    ...mapState('carousel', ['carouselList']),
  },
};
</script>