在 Cycle2 中如何实现轮播图居中高亮当前幻灯片

本文介绍通过调整 cycle2 的 carousel 可见数量与 css 定位策略，使当前激活幻灯片严格居中显示，解决多图可见模式下标题错位问题。

本文介绍通过调整 cycle2 的 carousel 可见数量与 css 定位策略，使当前激活幻灯片严格居中显示，解决多图可见模式下标题错位问题。

Cycle2 默认的 data-cycle-carousel-visible="3" 会同时显示三张幻灯片（左、中、右），但激活态（active）幻灯片默认位于中间位置的左侧——即视觉上“左对齐”于三张幻灯片的布局中心，导致绑定的标题（如 data-cycle-caption-template 渲染内容）无法自然对应到真正居中的视觉焦点。

要实现「当前幻灯片绝对居中」且保持左右两侧预览效果（即伪三图布局），核心思路是：放弃原生多图 carousel 的 active 定位逻辑，转而用单图 carousel + 手动 CSS 拓展可视区域模拟三图感观，同时确保 active slide 始终处于容器正中央。

✅ 正确做法如下：

1. 修改 HTML 属性：将 data-cycle-carousel-visible="3" 改为 "1"，启用单图 carousel 模式，此时 Cycle2 会精确控制唯一 active slide 的定位；
2. 引入 center 插件：确保已加载 jquery.cycle2.center.min.js（你已在代码中引入，这是关键）；
3. 重写关键 CSS：覆盖默认 carousel 容器行为，通过 margin-left 和 width 手动构造“视觉三图”布局，同时让 active slide 自然居中：

.module-bleed-img {  position: relative;  overflow: hidden !important; /* 防止子元素溢出干扰布局 */}.module-bleed-img .cycle-slideshow {  overflow: visible !important; /* 允许左右幻灯片部分可见 */  margin-left: 25%;            /* 将整个 slideshow 向右偏移 25%，使中心点对齐容器中心 */  width: 50%;                   /* 实际只渲染 50% 宽度（即 1 张图），但配合 margin-left 实现居中 */}

⚠️ 注意事项：

• margin-left: 25% + width: 50% 的组合，本质是将 slideshow 的左边缘置于容器 25% 处，其自身宽度占 50%，因此其中心点（25% + 25% = 50%）恰好落在容器水平中心，完美匹配 center 插件的定位逻辑；
• 必须保留 overflow: visible !important，否则左右相邻幻灯片会被裁剪，失去“预览感”；
• 若需响应式适配，建议将固定 25%/50% 替换为 calc() 或媒体查询下的动态值（例如 width: calc(100% / 3 * 1) 不适用，因 carousel 已设为 1；应基于视口或容器宽度微调）；
• data-cycle-carousel-fluid="true" 在此方案中可保留，但实际影响减弱，因其作用于多图模式；单图模式下更推荐结合 data-cycle-center-horz="true"（若未生效，检查插件加载顺序）。

最终效果：当前幻灯片始终精准居中，标题（#caption-4）自然对齐，左右两侧可见相邻幻灯片边缘，兼顾视觉引导与语义清晰性——既满足设计需求，又不依赖 hack 式 JS 重定位。