如何解决Swiper.js使用时撑大HTML页面宽度的问题

根本原因 #

• 自定义Swiper容器缺少必要的横向溢出裁剪属性：.swiperGallery没有显式设置overflow-x: hidden，部分移动端浏览器对transform/flex布局元素的溢出处理逻辑和PC端不同，不会自动隐藏超出容器宽度的轮播项，导致.swiper-wrapper的总宽度直接被计算进页面整体宽度
• 未正确引入Swiper官方基础CSS：Swiper的默认核心样式包含.swiper-wrapper的flex布局、.swiper-slide的flex-shrink:0等必要规则，缺失这些规则会导致轮播项不会按要求排列，总宽度异常
• 移动端viewport配置错误：页面head内的viewport标签未正确设置视口宽度，导致浏览器将溢出容器的元素宽度算入页面整体宽度

解决方案 #

1. 补充Swiper容器核心样式 #

不需要全量引入Swiper CSS的话，手动添加以下规则即可：

.swiperGallery {
  overflow-x: hidden; /* 核心属性，裁剪超出容器的轮播项 */
  position: relative;
}
.swiper-wrapper {
  display: flex;
  height: 100%;
}
.swiper-slide {
  flex-shrink: 0; /* 禁止轮播项自动压缩宽度 */
  width: 100%;
  height: 100%;
}
/* 给背景图容器加固定宽高，避免背景图不显示 */
.galleryImgWrapper {
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: cover;
}

你原来的三个id对应的样式可以删掉重复的background-size、background-repeat属性，仅保留background-image和自定义的background-position即可。

2. 修正移动端viewport配置 #

确认页面head标签内已经添加正确的viewport配置：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

3. 优化Swiper初始化参数（可选） #

如果使用Swiper 8及以上版本，可以添加cssMode: true参数，使用原生CSS溢出逻辑实现轮播，移动端兼容性更好：

var swiperGallery = new Swiper('.swiperGallery', {
  speed: 600,
  slidesPerView: 1,
  cssMode: true,
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
})

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