Swiper Coverflow效果：解决切换后两侧无法各显示一张幻灯片的问题

问题描述 #

我用Swiper实现了一个Coverflow效果的轮播组件，需求是保持激活幻灯片居中，同时在其两侧各显示一张幻灯片。目前遇到的问题是：初始状态显示正常，但切换到下一张幻灯片时，右侧仅显示一张幻灯片，无法实现两侧各显示一张的预期效果。

相关代码 #

JS代码 #

const sectionCarouselSliderSlider = new Swiper('.section-carousel-slider__slider', {
      loop: true,
      paginationClickable: true,
      effect: 'coverflow',
      grabCursor: true,
      centeredSlides: true,
      slidesPerView: 'auto',
      coverflowEffect: {
        rotate: 0,
        stretch: 0,
        depth: 100,
        modifier: 2.5,
        slideShadows: true,
      },
      navigation: {
        nextEl: '.carousel-slider__next',
        prevEl: '.carousel-slider__prev',
      },
    });

CSS代码 #

.section-carousel-slider__slider {
  max-width: calc(100% - 200px);
  height: 590px;
}

.swiper-slide {
  width: 37rem;
  position: relative;
}

.swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

解决方法 #

问题出在幻灯片间距、Coverflow重叠程度以及容器宽度设置上，修改如下：

修改后的JS代码 #

const sectionCarouselSliderSlider = new Swiper('.section-carousel-slider__slider', {
  loop: true,
  paginationClickable: true,
  effect: 'coverflow',
  grabCursor: true,
  centeredSlides: true,
  slidesPerView: 'auto',
  spaceBetween: 30, // 添加幻灯片间距，避免挤压
  coverflowEffect: {
    rotate: 0,
    stretch: 0,
    depth: 100,
    modifier: 1.5, // 降低重叠程度，让两侧幻灯片完整显示
    slideShadows: true,
  },
  navigation: {
    nextEl: '.carousel-slider__next',
    prevEl: '.carousel-slider__prev',
  },
});

修改后的CSS代码 #

.section-carousel-slider__slider {
  min-width: calc(37rem * 3 + 60px); /* 确保容器能容纳3张幻灯片+间距 */
  max-width: calc(100% - 200px);
  height: 590px;
  margin: 0 auto; /* 保持容器居中 */
}

.swiper-slide {
  width: 37rem;
  position: relative;
}

.swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

关键调整说明 #

1. spaceBetween：设置幻灯片之间的间距，避免挤在一起，让两侧的幻灯片有足够空间显示在容器内。
2. 降低modifier值：原2.5的modifier会导致幻灯片过度重叠，切换时右侧幻灯片被遮挡，调整为1.5后重叠程度降低，两侧幻灯片能完整呈现。
3. 容器min-width：计算3张幻灯片的总宽度（37rem×3）加上两侧间距（30px×2），设置为容器最小宽度，确保切换时容器宽度足够容纳所需显示的幻灯片，不会出现截断。

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