本文详解如何使用 Swiper 实现「大尺寸居中激活项 + 无视觉重叠」的画廊式轮播效果，通过精准控制 margin-left 与 transform 的协同，避免 scale() 导致的层叠遮挡问题。
本文详解如何使用 swiper 实现「大尺寸居中激活项 + 无视觉重叠」的画廊式轮播效果，通过精准控制 `margin-left` 与 `transform` 的协同，避免 `scale()` 导致的层叠遮挡问题。
在构建画廊风格轮播组件时，一个常见需求是：让当前激活滑块显著放大并严格居中显示，同时确保其前后滑块清晰可见、互不遮挡。原生 Swiper 的 centeredSlides: true 配合 slidesPerView: 1.5 虽能实现视觉居中，但直接对 .swiper-slide-active 应用 transform: scale(1.5) 会导致其物理尺寸扩大后侵占相邻滑块空间，造成视觉重叠——这正是问题的核心症结。
关键在于：不能仅依赖缩放（transform: scale()）改变尺寸，还需同步调整布局位置，为放大后的滑块“腾出空间”。Swiper 的 DOM 结构中，.swiper-slide-active 前后相邻元素分别具有 .swiper-slide-prev 和 .swiper-slide-next 类名。我们可利用这一结构，通过 margin-left 向右平移相邻滑块，从而在放大中心项的同时，为它“让出左侧空间”，避免重叠。
以下是推荐的完整解决方案：
.swiper-slide {
opacity: 0.4;
overflow: hidden;
transition: all 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
/* 移除默认宽度限制，允许 margin 平移生效 */
width: auto;
}
.swiper-slide-active {
opacity: 1;
z-index: 10;
transform: scale(1.5);
/* 向右偏移，为自身放大留出左侧空间 */
margin-left: 70px;
}
/* 将下一个滑块也向右推，避免被放大项覆盖 */
.swiper-slide-next {
margin-left: 70px;
}
/* 可选：微调上一个滑块，增强层次感（非必需） */
.swiper-slide-prev {
margin-right: 20px;
}
✅ 注意事项：
- margin-left 的具体数值（如 70px）需根据实际缩放比例（scale(1.5)）、原始滑块宽度及 spaceBetween 值动态调试，建议从 50px 起步逐步调整；
- 必须将 .swiper-slide 的 width 设为 auto，否则固定宽度会与 margin 冲突，导致布局错乱；
- transition 应作用于 all 属性，并采用缓动函数（如 cubic-bezier）提升动画自然度；
- 若启用 loop: true，需额外验证首尾循环过渡时的 margin 行为，必要时可通过 Swiper 的 slideChange 事件动态增删 class 控制。
该方案不修改 Swiper 初始化配置，完全通过 CSS 实现，兼容性好、性能高，且保留了 Swiper 原生的触摸/键盘导航逻辑。最终效果：中心滑块醒目放大、绝对居中；前后滑块清晰分离、无任何像素级重叠，真正达成专业画廊所需的视觉平衡与交互流畅性。
