本文详解如何通过 css 与 swiper 配合，将轮播图的当前激活项（active slide）精准居中显示，并使两侧非激活项按距离中心递减缩放，解决默认左对齐、视觉失衡问题。
要实现轮播图中当前图片严格居中显示（而非默认左对齐），同时让相邻幻灯片呈现自然的“缩放衰减”效果（越靠近中心越大，越靠外越小），仅靠基础 Swiper 配置或简单 margin: 0 auto 是不够的——关键在于启用 Swiper 的 centeredSlides: true 模式，并配合 CSS 精确控制容器布局与子项变换逻辑。
✅ 正确配置 Swiper（核心前提）
你当前的代码中并未显式初始化 Swiper 实例，而是依赖 Elementor 自带的 .elementor-swiper 组件。因此，必须确保该 Swiper 容器已启用居中模式。请在 Swiper 初始化阶段（或 Elementor 设置中）添加以下参数：
// 若可自定义 Swiper 配置（推荐在 Elementor → 轮播组件 → 高级设置中查找）
// 或在 JS 中重写初始化逻辑：
const swiper = new Swiper('.as-side-slider .swiper-container', {
centeredSlides: true, // ? 关键：启用居中对齐
slidesPerView: 'auto', // ? 允许动态宽度，适配缩放
spaceBetween: 30, // ? 控制幻灯片间距（影响缩放视觉层次）
loop: true,
navigation: {
nextEl: '.elementor-swiper-button-next',
prevEl: '.elementor-swiper-button-prev',
}
});⚠️ 注意：若使用 Elementor 默认轮播，需在后台编辑器中勾选 “居中对齐幻灯片”（Centered Slides），否则 CSS 居中无法生效。
✅ 修正 CSS：真正实现视觉居中与缩放梯度
你提供的 CSS 中存在两个关键问题：
- .swiper-container 仅设 margin: 0 auto 但未限定宽度，且父容器未设 text-align: center 或 display: flex；
- 缺少对非激活幻灯片的 scale() 动态缩放逻辑，仅靠 height 变化无法形成透视感。
以下是优化后的完整 CSS 片段（替换你原 selector 规则，建议用具体类名如 .as-slider 替代 selector）：
.as-slider .swiper-container {
overflow: hidden;
margin: 0 auto;
width: 100%;
max-width: 1200px; /* 根据设计需要调整 */
}
.as-slider .swiper-wrapper {
display: flex;
align-items: center;
justify-content: center; /* 强化水平居中 */
height: var(--active-height);
}
.as-slider .swiper-slide {
display: flex;
align-items: flex-end;
border-radius: var(--radius);
height: var(--height);
box-shadow: 0 0 50px rgba(0, 0, 0, 0.15);
transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); /* 更顺滑的缓动 */
transform: scale(0.85); /* 默认缩小 */
opacity: 0.7;
}
/* 当前激活项：放大 + 完全不透明 + 居中定位 */
.as-slider .swiper-slide.swiper-slide-active {
transform: scale(1);
opacity: 1;
z-index: 10;
height: var(--active-height);
}
/* 相邻幻灯片：中等缩放 */
.as-slider .swiper-slide.swiper-slide-active ~ .swiper-slide,
.as-slider .swiper-slide.swiper-slide-active + .swiper-slide {
transform: scale(0.92);
opacity: 0.85;
}
/* 远离中心的幻灯片：进一步缩小 */
.as-slider .swiper-slide:not(.swiper-slide-active):not(.swiper-slide-active ~ .swiper-slide):not(.swiper-slide-active + .swiper-slide) {
transform: scale(0.75);
}
/* 文字引用块居中（修复原 CSS 中的定位问题） */
.as-slider .elementor-testimonial__cite {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
z-index: 2;
text-align: center;
}✅ 响应式增强（适配移动端）
在媒体查询中，除调整尺寸外，务必保留 centeredSlides: true，并适当减小 spaceBetween 避免溢出：
@media (max-width: 767px) {
.as-slider {
--height: 80px;
--active-height: 105px;
}
.as-slider .swiper-slide {
height: var(--height);
}
.as-slider .swiper-slide.swiper-slide-active {
height: var(--active-height);
}
.as-slider .swiper-container {
max-width: 100%;
}
/* 移动端减少间距，提升紧凑感 */
.as-slider .swiper-wrapper {
padding: 0 20px;
}
}✅ 验证与调试建议
- 检查 Swiper 版本：确保使用 Swiper 6+（centeredSlides 在旧版中行为不一致）；
- 禁用干扰样式：移除可能覆盖 .swiper-slide 的 float、position: relative 等冲突规则；
- 浏览器检查：在 DevTools 中确认 .swiper-slide-active 元素是否真实获得 transform: scale(1) 且无 transform: translateX(...) 冲突；
- 性能提示：为 .swiper-slide 添加 will-change: transform, opacity 提升动画流畅度。
通过以上配置，你的轮播图将不再左对齐，而是以视觉焦点为中心，呈现专业级的卡片式轮播体验——既满足设计需求，又兼容 Elementor 生态与响应式场景。
