走马灯效果的swiper上了slidesPerView: ‘auto‘就不动了？autoplay失效？

需求：

这边要的是一个走马灯的效果，简单的实现是用一张图片轮播本身，然后就上了swiper

代码：

//HTML
<div
	v-swiper:bannerSwiper="swiperOption"
	ref="mySwiper"
>
	<div
		ref="swiperWrapper"
		class=" swiper-wrapper"
	>
		<div
			class="swiper-slide"
		>
			<img :src="multiImg" />
		</div>
		<div
			class="swiper-slide"
		>
			<img :src="multiImg" />
		</div>
	</div>
</div>

swiperOption: {
	// 滑动距离不是一个item
	freeMode: true,
	// 滑动速度
	speed: 48000,
	// 禁止手拖滑动
	allowTouchMove: false,
	// 自动播放
	autoplay: {
		delay: 0,
		reverseDirection: true,
		disableOnInteraction: false
	},
	slidesPerView: 'auto',
	loopedSlides: 3,
	loop: true
}

情况：

框架：nuxt

复现：从其他页面进入该页面，走马灯不走了。但是页面本身直接刷新，大概率可以用。当页面可以用之后，切换页面回来也是可以的

分析：

autoplay的几个钩子事件表明他都运行了。但是为何无效？

经过不断的尝试发现：纯img的slide用了slidesPerView：auto后出现该问题，改成非auto都行，但是我们就要这个随图片大小变化去自适应的效果。

解决手段

所以猜测是非页面刷新时，图片还没加载完就挂载了，然后swiper算不到宽度就无法播放。最后解决手段是在图片加载后去展示swiper

如mounted

mounted() {
	if (process.client) {
		const img = new Image()
		img.src = this.multiImg
		img.onload = () => {
			this.showSwiper = true
		}
	}
}