<template>
  <!--輪播圖-小-->
  <q-carousel v-model="slide" transition-prev="slide-right" transition-next="slide-left" :autoplay="5000" swipeable
    animated control-color="white" padding :arrows="imgLength>1" infinite height="235px"
    class="bg-primary text-white q-mb-xl">
    <template v-for="(x, i) in plugData.Details">
    <q-carousel-slide  :key="i" v-if="x.LinkImg" @click="clickSlideHandler(x.LinkUrl)" :name="i"
      :img-src="x.LinkImg">
      <div class="full-height column justify-center text-h4">
        <div class="text-center text-shadow">{{ plugData.Title }}</div>
      </div>
    </q-carousel-slide>
    </template>
  </q-carousel>
</template>
<script>
  export default {
    props: ["plugData"],
    
    data() {
      return {
        slide: 0,
        imgLength:0
      };
    },
    created() {
      this.imgLength = this.plugData.Details.filter(x=>x.LinkImg!='').length
    },
    methods: {
      clickSlideHandler(url) {
        if (url && url.length > 1) {
          this.OpenNewUrl(url);
        }
      }
    }
  };
</script>
<style>
</style>
