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

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

在使用 Cycle2 构建轮播图时，若希望同时展示三张幻灯片（左、中、右），并让中间那张作为当前活动项，你可能会发现默认行为并不理想——活动幻灯片并不会自然居中，而是偏向左侧。这导致通过 data-cycle-caption-template 渲染的标题也会随之偏移，出现视觉上的不对齐现象。

要如何让当前幻灯片“稳稳地”位于正中央，同时左右两侧还能露出部分内容作为预览？核心思路非常清晰：放弃原生多图 carousel 的 active 定位机制，改用单图 carousel 配合手动 CSS 模拟三图效果。这样 Cycle2 会按照单图模式精确控制 active slide 的位置，而通过 CSS 我们能够将容器“撑”出左右预览区域。

具体实现分为三个步骤：

• 调整 HTML 属性：将 data-cycle-carousel-visible="3" 修改为 "1"，启用单图模式。这样 Cycle2 仅处理一张幻灯片，并精准控制其定位。
• 引入 center 插件：确保加载 jquery.cycle2.center.min.js，这是实现幻灯片居中的关键依赖。
• 重写关键 CSS：覆盖默认的 carousel 容器行为，利用 margin-left 和 width 来“伪造”三图视觉布局。具体样式示例如下：

.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% 将 slideshow 的左边缘推到容器宽度的 25% 处，自身宽度为 50%，因此它的中心点恰好落在容器水平中心（25% + 25% = 50%），与 center 插件的定位逻辑完美契合。最终效果是当前幻灯片居中显示，左右两侧各露出少许相邻幻灯片的边缘。

需要注意的几点：

• 必须保留 overflow: visible !important，否则左右两侧的相邻图片会被裁切，失去预览效果。
• 如需响应式适配，可将 25% / 50% 替换为 calc() 或通过媒体查询微调偏移量，例如基于视口宽度动态调整。
• 旧属性 data-cycle-carousel-fluid="true" 可保留，但在单图模式下其影响不大。更建议同时设置 data-cycle-center-horz="true"（若不生效，请检查插件加载顺序）。

最终呈现的效果是：当前幻灯片始终精确居中，标题（如 #caption-4）自然对齐，左右两侧又能看到相邻幻灯片的边缘——既能满足视觉引导，又无需复杂的 JS hack。这套方法干净可控，值得实际项目采用。