vue3 Swiper组件自动轮播不生效及slideChange索引错乱问题

解决自动轮播问题

1.安装最新版Swiper

pnpm add swiper@latest  //^12.0.3

2.引入组件

import { Swiper, SwiperSlide } from "swiper/vue";
import { Autoplay } from 'swiper/modules' //关键代码，必须引入Autoplay组件

3.使用

<Swiper :autoplay="{
      delay: 6000,
      disableOnInteraction: false,
    }" :loop="true" :modules="[Autoplay]">
</Swiper>

最新版Swiper组件部分功能需单独引入

解决开启loop后，获取轮播索引错乱问题

因为轮播实现原理原因，slideChange无法准确获取索引，需进行方法替换

<Swiper :autoplay="{
      delay: 6000,
      disableOnInteraction: false,
    }" :loop="true" :modules="[Autoplay]" @slideChangeTransitionEnd="onSlideChange">
</Swiper>