如何在Swiper.js中实现图片绝对定位且溢出overflow:hidden的Swiper容器

该需求完全可以实现，你遇到的滚动条问题是溢出裁剪的层级逻辑错误导致的，按下面的方案调整即可：

• 调整容器嵌套结构，给Swiper外层新增一个自定义容器，仅用来裁剪轮播滑动时的横向溢出，Swiper本身的溢出限制放开：

/* 新增的外层父容器 */
.swiper-outer {
  width: 100%;
  overflow-x: hidden;
}
/* 覆盖Swiper默认的溢出隐藏配置 */
.swiper, .swiper-wrapper {
  overflow: visible !important;
}

• 给需要溢出显示的图片添加定位规则，设置高于下方容器的层级，同时保留你原本的slide显隐逻辑，注意给.swiper-slide添加上相对定位作为定位上下文：

.swiper-slide {
  position: relative;
  overflow: visible !important;
  opacity: 0;
  visibility: hidden;
  transition: opacity 200ms ease-in-out, visibility 200ms ease-in-out;
}
.swiper-slide-active {
  opacity: 1;
  visibility: visible;
}
/* 溢出显示的图片样式，数值按需调整 */
.target-img {
  position: absolute;
  bottom: -60px; /* 负数值表示伸出容器底部的距离 */
  left: 50%;
  transform: translateX(-50%);
  z-index: 10; /* 确保层级高于要覆盖的底部容器 */
}

• 如果还是出现横向滚动条，直接给页面根元素或者最外层布局容器添加overflow-x: hidden即可，不会影响你需要的纵向溢出显示效果。

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