本文介绍通过组合使用 transform: scale() 与精准的 margin-left 调整，解决 swiper 居中放大（centeredslides + scale）时相邻滑块被遮挡的问题，确保视觉层次清晰、布局不重叠。
本文介绍通过组合使用 transform: scale() 与精准的 margin-left 调整，解决 swiper 居中放大（centeredslides + scale）时相邻滑块被遮挡的问题，确保视觉层次清晰、布局不重叠。
在 Swiper 中实现“大图居中、两侧缩略预览”的画廊效果时，常见做法是启用 centeredSlides: true 并对 .swiper-slide-active 应用 transform: scale(1.5)。但直接缩放会导致活跃滑块物理尺寸变大，侵占前后滑块空间，造成视觉重叠甚至交互错位——这正是原问题的核心痛点。
关键在于：缩放（scale）改变的是元素自身尺寸，但不影响其在文档流中的占位；而重叠的本质是容器内滑块宽度总和 > 可视区域宽度，导致相邻项被挤压覆盖。 因此，不能仅依赖 CSS 缩放，还需主动为活跃滑块及其后继者预留横向空间。
✅ 正确解法：利用 margin-left 向右“推开”活跃滑块和下一个滑块，为放大后的主体留出安全间距：
.swiper-slide {
opacity: 0.4;
overflow: hidden;
transition: all 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.swiper-slide-active {
opacity: 1;
z-index: 2;
transform: scale(1.5);
margin-left: 70px; /* 向右平移，腾出左侧空间 */
}
.swiper-slide-next {
margin-left: 70px; /* 同步右移，避免被 active 滑块覆盖 */
}⚠️ 注意事项：
- margin-left 的数值需根据 scale() 值动态微调（如 scale(1.5) 通常配 60–80px），建议在不同屏幕尺寸下用媒体查询分段优化；
- 切勿对 .swiper-slide-prev 设置 margin-right —— Swiper 的 DOM 结构中，prev slide 实际位于 active 左侧，设置 margin-right 会加剧重叠；
- 若启用 loop: true，需额外测试首尾循环过渡处的 slide-prev/next 类名绑定是否稳定（Swiper v6+ 已较可靠）；
- 为保障动画流畅，transition 应作用于 all 或明确指定 transform 和 margin，并选用 cubic-bezier() 缓动函数提升观感。
? 进阶提示：若需响应式精细控制（如小屏仅放大 1.2x、大屏达 1.6x），可结合 Swiper 的 breakpoints 配置动态注入不同 margin-left 值，或通过 JS 监听 slideChangeTransitionStart 事件动态添加 class 控制间距。
该方案无需修改 Swiper 初始化逻辑，兼容 slidesPerView: 'auto' 或固定值，真正实现「视觉放大」与「布局隔离」的双重目标。
