<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>
