使用 SwiperJS React 滚动多张幻灯片

Question

我正在尝试使用 SwiperJS 实现无限滚动效果。我正在创建一个关卡选择界面，其中的时间轴代表年份，并不是每一年都过去了，所以刷卡应该跳过最多。

我想出了一种方法，但只能使用一次，而且似乎破坏了整个 swiper：

import React from 'react';
import { Swiper, SwiperSlide } from 'swiper/react';
import SwiperCore, {Pagination, Navigation} from 'swiper';
import 'swiper/swiper-bundle.css';

SwiperCore.use([Navigation,Pagination])

const LevelSelect = () => {
    const slides = [];

    for(let i=0;i<=10;i+=1){
        slides.push(
            <SwiperSlide>
            <div className='timelineFlex'>
                <div className='timeline'>
                    <div className='levels' id='levelOne'></div>
                    <div className='levels' id='levelTwo'></div>
                    <div className='levels' id='levelThree'></div>
                    <div className='levels' id='levelFour'></div>
                    <div className='levels' id='levelFive'></div>
                    <div className='levels' id='levelSix'></div>
                    <div className='levels' id='levelEight'></div>
                    <div className='levels' id='levelNine'></div>
                    <div className='levels' id='levelTen'></div>                    
                </div>
            </div>
            </SwiperSlide>
        )
    }
    

    return (
        <React.Fragment>
            <Swiper
            onSlideChange={(swiper)=>
                {
                    swiper.slideTo(5, 1000)
                }
            }
            className='timeline' 
            id='main' 
            navigation
            pagination>
            {slides}
            </Swiper>
        </React.Fragment>
    )
}

export default LevelSelect;

这种方法是我获得任何成功的唯一方法，但是，我不能多次滑动，也不能打开循环。