JavaScript缩略图Swiper/Slider异常：未展示幻灯片溢出页面

你的问题核心是Swiper容器未设置overflow: hidden，导致未展示的幻灯片直接暴露在页面中，撑宽了整个组件。另外，缩略图部分的样式设置也需要微调，确保幻灯片正确被容器裁剪。

具体修复步骤： #

1. 给Swiper容器添加溢出隐藏样式
   在你的CSS中，修改.swiper-container的样式，添加overflow: hidden：

   .swiper-container {
     width: 100%;
     height: 100%;
     overflow: hidden; /* 新增这一行 */
   }
   

   这会让容器裁剪掉超出自身范围的幻灯片，只显示当前视口内的内容。

2. 调整缩略图幻灯片的宽度设置
   你的.gallery-thumbs .swiper-slide设置了固定的width: 25%，结合slidesPerView: 'auto'可能导致布局冲突，建议改为flex-shrink: 0配合width，确保幻灯片不会被压缩，同时被容器裁剪：

   .gallery-thumbs .swiper-slide {
     width: 25%;
     height: 100%;
     opacity: 0.4;
     flex-shrink: 0; /* 新增这一行，防止幻灯片被压缩 */
   }
   

3. 可选：检查Swiper版本兼容性
   如果你使用的是Swiper 6及以上版本，官方推荐的容器类名是.swiper而非.swiper-container，虽然旧类名仍兼容，但统一类名可以避免潜在样式问题。你可以把HTML中的swiper-container替换为swiper，同时CSS选择器也对应修改。

修复后的完整CSS代码： #

html,
body {
  position: relative;
  height: 100%;
}
.swiper-container {
  width: 100%;
  height: 100%;
  overflow: hidden; /* 新增溢出隐藏 */
}

.swiper-slide{
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  align-items: center;
}
.gallery-top {
  height: 60%;
  width: 100%;
}

.gallery-thumbs {
  height: 20%;
  box-sizing: border-box;
  padding: 10px 0;
}

.gallery-thumbs .swiper-slide {
  width: 25%;
  height: 100%;
  opacity: 0.4;
  flex-shrink: 0; /* 新增防止压缩 */
}
.gallery-thumbs img{
    width:40%
}

.gallery-thumbs .swiper-slide-thumb-active {
  opacity: 1;
}

.gallery-top img{
width: 400px;
height:400px;
}

@media only screen and (min-width:100px) and (max-width:500px){
.gallery-top img{
width: 300px;
height:300px;
  }
.gallery-thumbs img{
      width:100%
  }
}

问题原因说明 #

Swiper的核心原理是让幻灯片在容器内横向排列，通过容器的overflow: hidden隐藏未显示的部分，再通过JS控制幻灯片的位移实现切换效果。如果容器没有设置overflow: hidden，所有幻灯片都会直接显示在页面上，自然会撑破容器宽度。

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