vue3 swiper应用 自动播放和左右切换

vue3 项目使用swiper，自动播放和左右切换都无效，折腾半天才能正常运行，记录一下代码

参考链接

在vue中使用swiper
swiper Demo

<script setup>
import SwiperCore, { Navigation, Autoplay, EffectFade } from 'swiper';
import { Swiper, SwiperSlide } from 'swiper/vue';
import 'swiper/scss';
import 'swiper/scss/navigation';
import 'swiper/css/effect-fade';
//swiper 轮播
SwiperCore.use([Navigation, Autoplay, EffectFade]);
</script>

<template>
  <swiper
    class="swiper-container home-swiper"
    loop
    :autoplay="true"
    :effect="'fade'"
    :navigation="{ nextEl: '.s-next', prevEl: '.s-prev' }"
  >
    <swiper-slide class="swiper-slide" key="1">
      <a class="btn" href="">
        <img src="img/process2.png" alt="" />
      </a>
    </swiper-slide>
      <a class="slide-arr s-prev" href="javascript:;"></a>
      <a class="slide-arr s-next" href="javascript:;"></a>
  </swiper>
</template>