React中用Swiper做的旋转木马轮播

 const imgList = useMemo(
    () =>
      new Array(26)//共26张图片
        .fill('')
        .map((item, index: number) => require(`./image/${index + 1}.jpg`)),  //每个图片名字就是index值+1
    [],
  )

 <Swiper
            watchSlidesProgress={true} //进度
            slidesPerView="auto" //同时显示的slides数量
            centeredSlides={true} //设定为true时，active slide会居中，而不是默认状态下的居左。
            loop={true} //首位循环
            loopedSlides={5} //同时显示的数量
            slideToClickedSlide={true} //点击居中
            allowTouchMove={false} //是否可以拖动
            onProgress={(swiper, progress: number) => {
              const slides: any = swiper.slides
              for (let i = 0; i < slides.length; i++) {
                const slide = slides.eq(i)
                const slideProgress = slides[i].progress
                const modify = 1
                const translate = slideProgress * modify * 100 + 'px'
                let scale = 1 - Math.abs(slideProgress) / 5
                scale = scale === 1 ? scale : scale + 0.1
                const zIndex = 999 - Math.abs(Math.round(10 * slideProgress))
                slide.transform('translateX(' + translate + ') scale(' + scale + ')')
                slide.css('zIndex', zIndex)
              }
            }}
            onSetTransition={(swiper, transition: number) => {
              //回调函数，每当设置Swiper开始过渡动画时执行。transtion获取到的是Swiper的speed值。
              console.log(transition)

              const slides = swiper.slides
              for (let i = 0; i < slides.length; i++) {
                const slide = slides.eq(i)
                slide.transition(transition)
              }
            }}
          >
            {imgList?.map((item, index: number) => {
              return (
                <SwiperSlide key={index}>
                  <img src={item} />
                </SwiperSlide>
              )
            })}
          </Swiper>