VueAwesomeSwiper 3d初次循环 卡动

Question

这样的一个移动端页面，初次加载的时候，如果触发手动轮播，则会卡住不动了，自动轮播是好用的，但一旦手动轮播也会卡住，也就不能自动轮播了。
但是退出该页面，再次进入，则手动轮播和自动轮播都是好用的了。

    <main v-if="hasdata">
        <div class="sliderbox">
            <swiper :options="swiperOption" v-if="productRecommends.length> 0">
                <swiper-slide v-for="(slide, index) in productRecommends" :key="index" >
                    <img :src= slide.logo alt="" class="img">
                    <img src="@/assets/hotproduct/top1.png" alt="" class="top" v-if="index == 0">
                    <img src="@/assets/hotproduct/top2.png" alt="" class="top" v-if="index == 1">
                    <img src="@/assets/hotproduct/top3.png" alt="" class="top" v-if="index == 2">
                    <p class="p1">{{slide.name}}</p>
                    <p class="p2">{{slide.subtitle}}</p>
                    <p class="p3">
                        <span>{{slide.prem}}</span>
                        <!-- <span>元起</span> -->
                    </p>
                    <p class="btn" @click="goDetail(slide.name, slide.url)">去看看</p>
                </swiper-slide>
            </swiper> 
        </div>
    </main>
    
    下面是swiper配置 我用coverflow和onprogress两种方式来达到上面的效果，但都有该问题。求教！！
         swiperOption: {
            loop: true,
            autoplay: {
                delay: 5000,
                disableOnInteraction: false,
            },
            // effect: "coverflow",
            // centeredSlides: true,
            // slidesPerView: "auto",
            // coverflowEffect: {
            //     rotate: 0,
            //     stretch: -30, // slide左右距离
            //     depth: 400, // slide前后距离
            //     modifier: 0.5, //
            //     slideShadows: false // 滑块遮罩层
            // },
            watchSlidesProgress: true,
            slidesPerView: 'auto',
            centeredSlides: true,
            observer:true,
            observeParents:true,
            on: {
                progress: function(progress) {
                    for (let i = 0; i < this.slides.length; i++) {
                        var slide = this.slides.eq(i);
                        var slideProgress = this.slides[i].progress;
                        let modify = 1;
                        if (Math.abs(slideProgress) > 1) {
                            modify = (Math.abs(slideProgress) - 1) * 0.3 + 1;
                        }
                        let translate = slideProgress * modify * 14.6 + 'rem';
                        let scale = 1 - Math.abs(slideProgress) / 5;
                        let zIndex = 20 - Math.abs(Math.round(10 * slideProgress));
                        slide.transform('translateX(' + translate + ') scale(' + scale + ')');
                        slide.css('zIndex', zIndex);
                        slide.css('opacity', 1);
                        if (Math.abs(slideProgress) > 3) {
                            slide.css('opacity', 0);
                        }
                    }
                },
                setTransition: function(transition) {
                    for (var i = 0; i < this.slides.length; i++) {
                        var slide = this.slides.eq(i)
                        slide.transition(transition);
                    }
                }
        },