Swiper轮播幻灯片溢出问题解决：精准控制单屏显示数量

解决方案 #

1. 修正Swiper断点配置逻辑 #

当前断点设置存在区间空白（768px-1023px），且未明确基础默认值，导致宽度计算异常。调整后的配置：

document.querySelectorAll('.swiper-container').forEach(container => {
  const id = container.getAttribute('data-id');
  
  new Swiper(`.swiper-container-${id}`, {
    loop: true,
    autoHeight: true,
    slidesPerView: 1, // 基础默认值，适配所有小于1024px的屏幕
    spaceBetween: 30,
    navigation: {
      nextEl: `.swiper-button-next-${id}`,
      prevEl: `.swiper-button-prev-${id}`,
    },
    breakpoints: {
      // 仅当屏幕宽度≥1024px时应用3张幻灯片配置
      1024: {
        slidesPerView: 3,
        slidesPerGroup: 3,
        spaceBetween: 40
      }
    }
  });
});

• 移除320px断点，用基础配置覆盖小屏幕场景，避免区间冲突
• 明确断点仅针对≥1024px的设备，确保规则清晰

2. 修复CSS容器与内边距问题 #

原.swiper-container的左右内边距会挤压幻灯片空间，导致Swiper计算宽度错误。调整CSS：

.swiper-container {
  width: 100%;
  height: auto;
  overflow: hidden;
  padding: 0; /* 移除容器内边距，避免宽度计算偏差 */
  position: relative; /* 确保导航按钮正确定位 */
  flex: none; /* 避免被Bootstrap的row布局拉伸 */
}

/* 将内边距转移到幻灯片容器，保证Swiper计算宽度准确 */
.swiper-wrapper {
  padding: 0 4rem;
}

/* 修正导航按钮定位，替代原margin方案 */
.swiper-button-prev, .swiper-button-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
}

.swiper-button-prev {
  left: 1rem;
  margin-right: 0;
}

.swiper-button-next {
  right: 1rem;
  margin-left: 0;
}

/* 强制幻灯片不收缩，确保宽度符合配置 */
.swiper-slide {
  flex-shrink: 0;
  width: auto;
}

• 把容器的内边距移到swiper-wrapper，让Swiper能正确计算单张幻灯片宽度
• 用绝对定位调整导航按钮位置，避免挤压容器空间
• 禁用幻灯片收缩，防止Bootstrap的flex布局干扰

3. 解决Bootstrap布局冲突 #

Bootstrap的row和align-items-center类可能影响Swiper的宽度计算，需重置相关属性：

/* 确保Swiper容器不受父级flex布局影响 */
.swiper-container.align-items-center {
  align-items: stretch !important; /* 覆盖Bootstrap的align-items-center */
}

• 强制重置Swiper容器的对齐方式，避免被父级row的居中布局拉伸

4. 可选：关闭autoHeight #

如果autoHeight导致高度波动影响宽度计算，可关闭该选项并手动设置高度：

new Swiper(`.swiper-container-${id}`, {
  // ...其他配置
  autoHeight: false,
});

.swiper-container {
  min-height: 400px; /* 根据幻灯片内容调整高度 */
}

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