我在移动端使用Swiper.js，开启了centeredSlides: true和loop: true，希望当前幻灯片居中显示，前后幻灯片各显示约20%的部分。

目前默认仅能看到第一张幻灯片，手动拖动或切换幻灯片时，前两张可正常显示，但后续幻灯片无法展示。

我的需求如下：

• 激活状态的幻灯片居中显示；
• 两侧显示前后幻灯片的20%部分；
• 所有幻灯片可完整循环，无遗漏或跳过。

请问如何在Swiper.js中实现上述效果？

<Swiper
  onBeforeInit={(swiper) => {
    swiperRef.current = swiper;
  }}
  modules={[Autoplay, FreeMode]}
  slidesPerView={4}
  loop={true}
  speed={600}
  centeredSlides={true}
  autoplay={{
    delay: 3000,
    disableOnInteraction: false,
    pauseOnMouseEnter: false,
  }}
  breakpoints={{
    0: {
      slidesPerView: 1.6,
      centeredSlides: true,
    },
    640: {
      slidesPerView: 2,
      centeredSlides: false,
    },
    1024: {
      slidesPerView: 3,
      centeredSlides: false,
    },
    1280: {
      slidesPerView: 4,
      centeredSlides: false,
      loop: false,
    },
  }}
  className="category-swiper !overflow-visible"
>
  {categories.map((cat, idx) => renderCategoryCard(cat, idx))}
</Swiper>

解决方案 #

你的问题核心是loop模式下，移动端slidesPerView配置与幻灯片容器的溢出规则不匹配，导致循环时后续幻灯片无法正常渲染。按以下步骤调整即可解决：

1. 修正移动端slidesPerView数值 #

要实现中间幻灯片完整显示、两侧各露20%的效果，slidesPerView应设为1.4（1个完整幻灯片 + 左右各0.2个幻灯片的宽度），精准匹配你的需求。

2. 补充spaceBetween控制间距（可选） #

如果需要幻灯片之间留空白，添加spaceBetween参数（比如设为10），避免两侧幻灯片与中间幻灯片紧贴，提升视觉体验。

3. 统一断点中的loop配置 #

在移动端断点中明确指定loop: true，避免Swiper的默认逻辑覆盖配置；非移动端保持loop: false即可。

4. 确保幻灯片卡片宽度适配 #

检查renderCategoryCard返回的卡片元素，不要设置固定宽度为100%，建议用width: 100%让Swiper自动分配宽度，避免挤压两侧幻灯片的显示空间。

调整后的完整代码 #

<Swiper
  onBeforeInit={(swiper) => {
    swiperRef.current = swiper;
  }}
  modules={[Autoplay, FreeMode]}
  slidesPerView={4}
  loop={true}
  speed={600}
  centeredSlides={true}
  spaceBetween={10} // 可根据需求调整间距大小
  autoplay={{
    delay: 3000,
    disableOnInteraction: false,
    pauseOnMouseEnter: false,
  }}
  breakpoints={{
    0: {
      slidesPerView: 1.4,
      centeredSlides: true,
      loop: true,
    },
    640: {
      slidesPerView: 2,
      centeredSlides: false,
      loop: false,
    },
    1024: {
      slidesPerView: 3,
      centeredSlides: false,
      loop: false,
    },
    1280: {
      slidesPerView: 4,
      centeredSlides: false,
      loop: false,
    },
  }}
  className="category-swiper !overflow-visible"
>
  {categories.map((cat, idx) => renderCategoryCard(cat, idx))}
</Swiper>

额外优化建议 #

如果使用FreeMode，可添加freeMode: { sticky: true }，让拖动结束后幻灯片自动吸附到居中位置，提升交互流畅度。

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