记swiper使用问题

<Swiper
	:space-between="50"
	:modules="[Autoplay]"
	:autoplay="{ delay: 2000, disableOnInteraction: true }"
	:loop="true"
	>
		<SwiperSlide style="display: flex; height: 80vh; align-items: center; justify-content: center" v-for="index in 11" :key="index">
			<el-image style="width: 100%; height: 100%" fit="scale-down" :src="getImgUrl(index)" alt=""/>
		</SwiperSlide>
	</Swiper>

<script lang="ts" setup>
import { Swiper, SwiperSlide } from 'swiper/vue';
import { Autoplay, Navigation } from 'swiper';
import 'swiper/css';
import 'swiper/css/effect-cube';
import 'swiper/css/pagination';
import 'swiper/css/navigation';
import 'swiper/css/autoplay';
import 'swiper/css/effect-fade';

问题：没有自动播放效果。
但是在下面这种写法的时候可以，刚开始以为是循环问题，写成固定的后还是不对，尝试修改了下用img替换了el-image解决了问题。
不知道是不是这个原因，暂且记录一下。

<Swiper
	:space-between="50"
	:modules="[Autoplay]"
	:autoplay="{ delay: 2000, disableOnInteraction: true }"
	:loop="true"
	>
		<SwiperSlide style="display: flex; height: 80vh; align-items: center; justify-content: center"> <img src="xxx1.png" alt="" /></SwiperSlide>
		<SwiperSlide style="display: flex; height: 80vh; align-items: center; justify-content: center"> <img src="xxx2.png" alt="" /></SwiperSlide> 
	</Swiper>