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

leoonliang

于 2021-11-10 17:27:05 发布

阅读量3.5k

点赞数

文章标签： vue 前端

本文链接：https://blog.csdn.net/qq_42555422/article/details/121252683

版权

这篇博客讨论了在Nuxt.js框架下使用swiper实现走马灯效果时遇到的问题。当从其他页面进入含有走马灯的页面，由于图片可能未加载完成，导致走马灯无法正常工作。通过分析和测试，作者发现问题出在`slidesPerView: 'auto'`设置上，并提出解决方案：在图片加载完成后初始化swiper。作者在`mounted`生命周期钩子中利用`new Image()`预加载图片，并在图片加载成功后显示swiper，从而解决了问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求：

这边要的是一个走马灯的效果，简单的实现是用一张图片轮播本身，然后就上了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

复现：从其他页面进入该页面，走马灯不走了。但是页面本身直

最低0.47元/天解锁文章