<template>
  <div class="components">
    <swiper :options="swiperOption" ref="myBannerSwiper">
      <swiper-slide class="swiper-slide" v-for="(item,index) in data" :key="index">
        <a @click="bannerLink(item)">
          <img :src="item.img" class="cover" alt>
        </a>
      </swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
  </div>
</template>

<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
export default {
  name: 'swiperBanner',
  props: ['data'],
  data () {
    return {
      swiperOption: {
        observer: true,
        pagination: {
          el: '.swiper-pagination'
        },
        autoplay: {
          disableOnInteraction: false
        }
      }
    }
  },
  computed: {
  },
  components: {
    swiper,
    swiperSlide
  },
  created () {
  },
  mounted () {
    this.$nextTick(() => {
    })
  },
  methods: {
    bannerLink (item) {
      this.$emit('bannerLink', item)
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.components {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  >div{
    width: 100%;
    height: 100%;
    .swiper-slide{
      a{
        width: 100%;
        height: 100%;
        display: block;
        position: relative;
        overflow: hidden;
      }
    }
  }
}
</style>
