UnivateProperties/src/components/propertyManagement/rentalManagement/carouselSection.vue

<template>
  <section id="intro">
    <div class="container">
      <div class="row">
        <div align="left" class="col-sm-12 col-md-8">
          <div class="intro-content box">
            <h2>Let us manage your property</h2>
            <p>
              At Uni-Vate we appreciate the significant and positive relationship between effective Property Management and property prices.  We understand that effective management not only relies on administrative processes being intact, but also on a clear plan and good communication with our clients based on respect, trust understanding, openness and accountability.  We have access to a comprehensive set of human and other resources to ensure that your property is proactively managed to protect your investment and to ensure the contentedness of occupants.
              We offer comprehensive property management services, whether it being Sectional Title Management, HOA Management or Rental Property Portfolio Management.  
            </p>
            <a href="#" class="btn-solid-blue">LIST YOUR PROPERTY WITH UNI-VATE PROPERTIES</a>
            <router-link v-if="!isLoggedIn" to="/user/login" class="btn-white-border"
              >LOGIN TO OWNERS PORTAL</router-link
            >
          </div>
        </div>
      </div>
    </div>

    <carousel
      :nav="false"
      :dots="false"
      :items="1"
      :autoplay="true"
      :loop="true"
      :autoHeight="true"
      id="intro-carousel"
      style="margin-top:-50px;"
      :responsive="{ 0: { items: 1, nav: false }, 600: { items: 1, nav: false } }"
    >
      <img class="item" src="/img/intro-carousel/home-1.jpg" alt="" />
      <img class="item" src="/img/intro-carousel/16.jpg" alt="" />
      <img class="item" src="/img/intro-carousel/comm-1.jpg" alt="" />
      <img class="item" src="/img/intro-carousel/comm-4.jpg" alt="" />
      <img class="item" src="/img/intro-carousel/3.jpg" alt="" />
      <img class="item" src="/img/intro-carousel/home-5.jpg" alt="" />
    </carousel>

    <div id="intro-carousel" class="owl-carousel"></div>
  </section>
</template>

<script>
/* eslint-disable */
import { mapState, mapActions } from "vuex";
import Log from "../../../assets/Log";
import carousel from "vue-owl-carousel";
export default {
  components: {
    carousel
  },
  computed: {
    ...mapState("authentication", ["user", "flag", "status", "person", "token"]),
    isLoggedIn() {
      console.log(Log.isLoggedIn());
      return Log.isLoggedIn();
    }
  }
};
</script>

<style lang="scss" scoped></style>