如何在 Swiper 中制作居中放大滑块并避免重叠

本文介绍通过组合使用 transform: scale() 与精准的 margin-left 调整，解决 swiper 居中放大（centeredslides + scale）时相邻滑块被遮挡的问题，确保视觉层次清晰、布局不重叠。

针对 swiper 使用 centeredslides + scale 居中放大后遮挡相邻滑块的问题，本文把 transform: scale() 与精确的 margin-left 调整结合起来，让布局不再重叠并保持清晰的视觉层次。

画廊要呈现“两侧缩略预览、大图居中”的效果，通常需在 Swiper 中为 .swiper-slide-active 应用 transform: scale(1.5)，同时启用 centeredSlides: true。问题在于，缩放后的活跃滑块会因物理尺寸增大而占据前后滑块的空间，视觉重叠与交互错位随之出现，原问题的核心痛点正在于此。

其中的关键是：元素自身尺寸会被缩放（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 滑块覆盖 */}

需要注意：

• 应按照 scale() 的数值动态微调 margin-left，例如 scale(1.5) 一般搭配 60–80px；同时建议利用媒体查询，针对不同屏幕尺寸分段优化。
• 切勿对 .swiper-slide-prev 设置 margin-right —— 设置 margin-right 反而会让重叠加剧，因为在 Swiper 的 DOM 结构中，active 左侧才是 prev slide 的实际位置；
• 首尾循环过渡处还应额外验证 slide-prev/next 类名能否保持稳定绑定，前提是启用了 loop: true（Swiper v6+ 已较可靠）；
• 动画观感的提升可选用 cubic-bezier() 缓动函数，而流畅性则要求 transition 覆盖 all，或将 transform 和 margin 明确列为作用对象。

? 进阶提示：借助 JS 监听 slideChangeTransitionStart 事件并动态添加 class，可以控制间距；也可以使用 Swiper 的 breakpoints 配置，为不同尺寸动态注入相应的 margin-left 值，从而进行响应式精细控制（如大屏达 1.6x、小屏仅放大 1.2x）。

「视觉放大」和「布局隔离」这两个目标可由该方案同时达成，并且无论 slidesPerView: 'auto' 还是固定值均能兼容，Swiper 初始化逻辑也不必修改。