<template md="12" sm="12">
  <b-card>
    <swiper
      class="swiper-autoplay"
      :options="swiperOptions"
      :dir="$store.state.appConfig.isRTL ? 'rtl' : 'ltr'">
      <swiper-slide
        v-for="data in swiperData"
        :key="data.img">
        <a :href="data.href" target="_blank">
          <b-img
            style="display: block;
        margin-left: auto;
        margin-right: auto;
        width: 80%;"
            :src="data.img"
            fluid />
        </a>
      </swiper-slide>
      <div
        slot="pagination"
        class="swiper-pagination" />
      <div
        slot="button-next"
        class="swiper-button-next" />
      <div
        slot="button-prev"
        class="swiper-button-prev" />
    </swiper>
  </b-card>
</template>

<script>
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
import { BRow, BCol, BCard, BCardText, BLink, BImg } from 'bootstrap-vue'
import 'swiper/css/swiper.css'

export default {
  components: {
    BRow,
    BCol,
    BCard,
    BCardText,
    BLink,
    Swiper,
    SwiperSlide,
    BImg,
  },
  data() {
    return {
      swiperOptions: {
        spaceBetween: 30,
        effect: 'fade',
        centeredSlides: true,
        autoplay: {
          delay: 5000,
          disableOnInteraction: false,
        },
        pagination: {
          el: '.swiper-pagination',
          clickable: true,
        },
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        },
      },

      /* eslint-disable global-require */
      swiperData: [
        { img: require('@/assets/images/banner/home-1.jpg'), href: "http://www2.maaconsultants.com/tw/about/detail.php?dpid=2" },
        { img: require('@/assets/images/banner/home-2.gif'), href: "http://www2.maaconsultants.com/tw/projects/detail.php?dpid=486" },
        { img: require('@/assets/images/banner/home-3.jpg'), href: "http://www2.maaconsultants.com/tw/projects/detail.php?dpid=484" },
        { img: require('@/assets/images/banner/home-4.jpg'), href: "http://www2.maaconsultants.com/tw/projects/detail.php?dpid=481" },
        { img: require('@/assets/images/banner/home-5.jpg'), href: "http://www2.maaconsultants.com/tw/projects/detail.php?dpid=475" },
        { img: require('@/assets/images/banner/home-6.jpg'), href: "http://www2.maaconsultants.com/tw/projects/detail.php?dpid=512" },
        { img: require('@/assets/images/banner/home-7.jpg'), href: "http://www2.maaconsultants.com/tw/projects/detail.php?dpid=503" },
      ],
      /* eslint-disable global-require */
    }
  },
}
</script>