colmo-h5/src/pages/IndexImage.vue

<template>
  <div class="index-image">
    <div class="index-inner-swiper">
      <swiper :options="swiperOptions" ref="swiperRef">
        <swiper-slide class="index-inner-slide" v-for="item in list" :key="item">
          <img :src="item" />
        </swiper-slide>
      </swiper>
    </div>
  </div>
</template>

<script>
export default {
  name: 'IndexImage',
  props: {
    list: {
      type: Array
    }
  },
  watch: {
    list() {
      this.$nextTick(() => {
        this.$refs.swiperRef.update()
      })
    }
  },
  data() {
    return {
      swiperOptions: {
        autoplay: {
          delay: 2500
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.index-image {
  .index-inner-swiper {
    .index-inner-slide {
      position: relative;

      & > img {
        width: 100%;
        height: 37vh;
      }
    }
  }
}
</style>