vue-awesome-swiper automatically skips the first sheet

　　I made a product page at work yesterday. The requirement is to obtain the path of the carousel map from the background interface, and then pass it to the packaged component. I thought it was very simple, no problem, let's start~

　　The thing is very simple, create a banner component as follows:

<template>
        <!--Full screen carousel-->
               <!-- <swiper :options="swiperOption" ref="mySwiper" @someSwiperEvent="callback" style = "width:16rem;height:5.12rem;"> -->

               <swiper :options="swiperOption" ref="mySwiper" :style = "warpStyle" style = "z-index:0;">
                                    <!-- slides -->
                                    
                                    <swiper-slide v-for = "item in pages" :key = "item.url" >
                                   
                                        <img :src="item" class="swiper-lazy" :style = "warpStyle" >

                                        <div class="swiper-lazy-preloader"></div>
                                
                                    </swiper-slide>
                                  
      
                                    <!-- Optional controls -->
                                    <div class="swiper-pagination"  slot="pagination"></div>
                
                     </swiper>
 

</template>

<script>
// require styles
import 'swiper/dist/css/swiper.css'
 
import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {
    props:["warpStyle","pages"],









    
     name: 'carrousel',
    data() {
      return {
        swiperOption: {
    loop: true,
     pagination: {
      el: '.swiper-pagination',
    },
    autoplay:true,
    delay:3000,
    disableOnInteraction:false,
    effect:"slide",
      lazy: {
    loadPrevNext: true,
  },
        }
      }
    },

    computed: {
      swiper() {
        return this.$refs.mySwiper.swiper
      }
    },
    mounted() {
      // current swiper instance 
      // Then you can use the swiper object in the current context to do what you want 
    //    console.log('this is current swiper instance object', this.swiper)

    },
    components: {
        swiper,
        swiperSlide
  }

}
</script>

<style>
    .swiper-lazy-preloader{
        background:transparent;
    }
</style>

　　　　　　Then create a new array, and assign it directly to the array after obtaining it. Just when I thought it was done, the problem came. The first one will be automatically skipped, but the static one is no problem. Rendering problem, what should I do? Then let him start not loading the handle, and wait until the acquisition is complete before importing it. The code is as follows:

Because it is a component of the project, if you use it, you also need to pass in a wrapStyle which is the style of the package, and an options which is the configuration of the swiper. The small partners who need it can use it by themselves.

If you don't understand or need to communicate with friends, you can add me qq: 15274527