<template>
  <div class="carousel">
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <img class="swiper-slide" v-for="(v, index) in ImageArray" :key="index" :src="v" />
      </div>
    </div>
  </div>
</template>

<script>
import Swiper from 'swiper';
export default {
  props: {
    ImageArray: {
      type: Array,
      default: () => {
        return [];
      }
    },
    speed: {
      type: Number,
      default: 1500
    }
  },
  data() {
    return {
      currentIndex: 0,
      timer: null,
      mySwiper: null
    };
  },
  watch: {},
  mounted() {
    this.initSwiper();
  },
  methods: {
    initSwiper() {
      this.mySwiper = new Swiper('.swiper-container', {
        autoplay: true,
        effect: 'fade',
        fadeEffect: true,
        speed: this.speed,
        loop: true,
        updateOnWindowResize: true,
        watchSlidesProgress: true
      });
      this.mySwiper.init();
    }
  },

  beforeDestroy() {
    this.mySwiper.destroy();
  }
};
</script>

<style lang="less" scoped>
.carousel {
  width: 100%;
  height: 100%;
  .swiper-container {
    width: inherit;
    height: inherit;
  }
  .swiper-slide {
    width: inherit;
    height: inherit;
  }
}
</style>
