Swiper如何隐藏非活跃幻灯片中的图片？

直接给元素加overflow: hidden导致图片消失，是因为这个属性是裁剪超出容器的内容，而非针对性隐藏非活跃项里的图片。换个思路，利用Swiper自带的类来精准控制：

• 首先，Swiper会自动给当前活跃的幻灯片加上swiper-slide-active类，我们可以用这个类反向选中所有非活跃幻灯片
• 给这些非活跃幻灯片里的图片设置隐藏样式就行

具体CSS代码可以这么写：

/* 完全隐藏非活跃slide的图片，不占空间 */
.swiper-slide:not(.swiper-slide-active) img {
  display: none;
}

如果不想让布局因为图片消失跳动，想保留占位空间，可以改成：

/* 隐藏图片但保留占位，加过渡动画更自然 */
.swiper-slide img {
  transition: opacity 0.3s ease;
}
.swiper-slide:not(.swiper-slide-active) img {
  opacity: 0;
  visibility: hidden;
}

原理很简单：只针对非活跃幻灯片里的图片做隐藏，而不是给整个slide加overflow裁剪，这样既实现了需求，也不会影响图片正常显示和滑块功能。

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