如何基于React和Swiper.js实现全景式滑块效果？

我正在开发一个React画廊网站，希望实现全景式滑块效果（效果参考：）。

目前我使用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>

当前实现的效果为：，但未达到预期效果，请问如何调整才能实现目标全景滑块效果？

调整方案 #

• 修改Coverflow核心参数：

  1. 调整rotate值：将rotate:15改为rotate:0，目标效果里的滑块无旋转角度，是平行排列的全景样式。
  2. 启用并设置stretch：取消stretch的注释，设置stretch:-100（负数让滑块向中心收缩，营造堆叠感，数值可按需调整）。
  3. 增大depth值：将depth:100改为depth:300，增强滑块层级透视感，让两侧滑块更靠后。
  4. 调整modifier：改为modifier:2，放大Coverflow效果强度，让透视和收缩更明显。

• 调整布局参数：

  1. 减小spaceBetween：将spaceBetween:50改为spaceBetween:10，让滑块间更紧凑，贴合全景排列视觉。
  2. 调整slidesPerView：改为slidesPerView:7（可根据容器宽度适配），保证两侧有足够滑块露出，营造全景延伸感。

• 添加居中布局设置：
  在Swiper组件中添加centeredSlides={true}，让当前激活滑块居中显示，这是全景滑块的核心布局特征。同时调整initialSlide为3，配合居中设置让初始状态更贴合全景效果。

修改后的核心配置示例：

<Swiper 
  modules={[Navigation, A11y, EffectCoverflow]} 
  spaceBetween={10} 
  slidesPerView={7} 
  initialSlide={3}
  centeredSlides={true}
  effect="coverflow" 
  coverflowEffect={{ 
    rotate: 0, 
    stretch: -100, 
    depth: 300, 
    modifier: 2, 
    slideShadows: false, 
  }} 
  // 保留原有事件与属性
>
  {/* 滑块内容 */}
</Swiper>

• 样式优化：
  给Swiper容器添加overflow: visible（按需设置），让两侧滑块完全露出；同时调整SwiperSlide的宽度，通过组件属性或CSS设置，保证滑块在全景布局下的尺寸协调。

内容的提问来源于stack exchange，提问作者Mich25educ