如何使用Swiper实现幻灯片激活上弹突出且不被容器裁剪的效果

问题现状 #

• 预期效果：基于Swiper实现轮播，带active类的激活幻灯片向上弹跳突出，突出展示的图片可溢出Swiper容器范围，不被裁剪
• 现存问题：当前代码中超出Swiper容器的内容全部被截断，无法实现溢出展示
• 已完成工作：已准备dataSample做遍历渲染，已实现激活幻灯片自动加active类的逻辑，CSS初稿中已标注实现思路注释

修复步骤 #

1. 关闭Swiper默认裁剪逻辑
   Swiper默认给容器加了溢出隐藏属性，直接覆盖对应类的样式即可：

.swiper,
.swiper-wrapper {
  overflow: visible !important;
}

注意：不要给Swiper的外层包裹容器加overflow: hidden属性，否则内容依然会被裁剪

2. 编写幻灯片状态样式与弹跳动画

/* 常规幻灯片基础样式 */
.swiper-slide {
  height: 220px; /* 按实际设计稿的常规幻灯片高度调整 */
  transition: transform 0.3s ease;
  transform: translateY(0);
}

/* 激活幻灯片突出样式 */
.swiper-slide.active {
  transform: translateY(-40px); /* 向上突出的距离可按视觉需求调整 */
  z-index: 99; /* 提高层级，避免激活片被相邻幻灯片遮挡 */
  animation: slideBounce 0.5s ease forwards;
}

/* 弹跳动画关键帧 */
@keyframes slideBounce {
  0% {
    transform: translateY(0);
  }
  65% {
    transform: translateY(-50px);
  }
  85% {
    transform: translateY(-35px);
  }
  100% {
    transform: translateY(-40px);
  }
}

3. 配置项排查
   如果开启了Swiper的loop循环、centeredSlides居中等配置，不需要额外添加和裁剪相关的参数，保持默认配置即可，不要手动给Swiper容器添加固定高度限制。

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