vue3中swiper在loop模式下切换到倒数第二个后，最后一个旁边是空白的怎么解决？

使用了swiper的coverflowEffect效果，设置了同时显示3个，同时开启了loop模式，

当切换到倒数第二张时没有新的slider生成，导致最后一张的右边是空白的，只有切换到最后一张时才会再在后面复制新的slider，怎么让它在显示倒数第二张时就生成新的slider？

这是代码

<template>
    <swiper
style=" width: 800px;height: 169px;"
        loop
        navigation
        effect="coverflow"
        :coverflowEffect="{
            rotate: 0,
            stretch: 0,
            depth: 200,
            modifier: 2,
            slideShadows: false
        }"
        :autoplay="{
            delay: 2000,
            stopOnLastSlide: false,
            disableOnInteraction: false
        }"
        :modules="modules"
        :slides-per-view="3"
        :space-between="-30"
        :pagination="{ clickable: true }"
        @swiper="onSwiper"
        @slideChange="onSlideChange"
    >
        <swiper-slide v-for="i in 3" :key="i">
            <div
                style="
                    width: 300px;
                    height: 169px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                "
                :style="{ backgroundColor: color16() }"
            >
                {{ i }}
            </div>
        </swiper-slide>
    </swiper>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import {
    Navigation,
    EffectCoverflow,
} from 'swiper';
import { Swiper, SwiperSlide } from 'swiper/vue';
import 'swiper/less';
import 'swiper/less/navigation';
import 'swiper/less/effect-coverflow';

const color16 = () => {
    //十六进制颜色随机
    const r = Math.floor(Math.random() * 256);
    const g = Math.floor(Math.random() * 256);
    const b = Math.floor(Math.random() * 256);
    const color = `#${r.toString(16)}${g.toString(16)}${b.toString(16)}`;
    return color;
};

const modules = ref([
    Navigation,
    EffectCoverflow,
]);

const onSwiper = (swiper: any) => {
    console.log(swiper);
};
const onSlideChange = () => {
    console.log('slide change');
};
</script>

<style lang="less" scoped></style>