<template>
  <div>
    <div class="home-head">
      <swiper ref="mySwiper" :options="swiperOptions" class="item-swiper">
        <swiper-slide v-for="(item, index) in swiperList" :key="index">
          <router-link :to="`/news/detail?id=${item.id}&type=home`">
            <img :src="item" alt="" />
          </router-link>
        </swiper-slide>
      </swiper>
    </div>
  </div>
</template>
<script>
import { swiper, swiperSlide, directive } from 'vue-awesome-swiper'
import 'swiper/swiper-bundle.css'
export default {
  components: {
    swiper,
    swiperSlide
  },
  directives: {
    swiper: directive
  },
  data() {
    const _this = this
    return {
      swiperList: ['https://zws-imgs-pub.ezijing.com/static/public/097c7cf05ebd01ac34743c50fb0ed9f1.png', 'https://zws-imgs-pub.ezijing.com/static/public/097c7cf05ebd01ac34743c50fb0ed9f1.png'],
      swiperOptions: {
        on: {
          slideChangeTransitionStart: function() {
            _this.swiperIndex = this.activeIndex
          }
        },
        observer:true,//修改swiper自己或子元素时，自动初始化swiper 
        observeParents:true,//修改swiper的父元素时，自动初始化swiper 
        loop:true,
        autoplay: {
          delay: 2000,
          disableOnInteraction: false
        }
      }
    }
  },
  computed: {
    swiper() {
      return this.$refs.mySwiper.$swiper
    }
  }
}
</script>
<style lang="scss" scoped>
.home-head{
  img{
    width: 100%;
    display: block;
  }
}
</style>
