在 Javascript 中创建全景滑块

I am currently working on a gallery website with react and I would like to create a slider that has a panoramic effect such as the one shown below:

我目前正在使用 Swiper.js ，代码如下：

<Swiper
        modules={[Navigation, A11y, EffectCoverflow]}
        spaceBetween={50}
        slidesPerView={5}
        initialSlide={1}
        effect="coverflow"
        coverflowEffect={{
          rotate: 15,
          // stretch: 0,
          depth: 100,
          modifier: 1,
          slideShadows: false,
        }}
        onSlideChange={() => console.log("slide change")}
        onSwiper={(s) => setSwiper(s)}
        onSliderMove={(s, e) => {
          moveSecondCursor(e.clientX, e.clientY);
        }}
      >
        {slides.map((slide) => (
          <SwiperSlide
            className=" odd:bg-blue-400 even:bg-blue-700"
            onMouseEnter={() => toggleCursor(true)}
            onMouseLeave={() => toggleCursor(false)}
            onClick={(e) => openCard(e, slide.id)}
            key={slide.id}
          >
            <div className="slide-content cursor-none slide-item w-full flex items-center justify-center">
              {slide.text}
            </div>
          </SwiperSlide>
        ))}
      </Swiper>

Using the above code, i was able to obtain the following effect:

但这还不是我所需要的。有谁知道我如何才能达到正确的效果？

if you want to use the panorama effect just like this picture shown below

OPTION 1: 有刷卡工作室 https://studio.swiperjs.com/您需要连接您的Patreon帐户才能导出全景效果。

OPTION 2: 因为效果还没有出现GitHub 中的 SwiperJ https://github.com/nolimits4web/swiper/blob/master/src/components-shared/params-list.js所以你可以分叉 swiperJs 存储库并创建自定义效果并将其放入模块目录中，

Note: 你不能覆盖效果的 CSS，因为它是用 SwiperJs 制作的内联样式