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

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

问题：Cycle2 多图模式下当前幻灯片不居中

用 Cycle2 做轮播图时，如果你希望同时显示三张幻灯片（左、中、右），并且让中间那张成为当前激活项，那么默认行为可能会让你有点意外——激活的幻灯片并不会自然居中，而是偏左。这意味着，绑定在幻灯片上的标题（比如通过 data-cycle-caption-template 渲染的内容）也会跟着错位，视觉上就是对不齐的。

解决方案：单图 carousel + CSS 模拟三图效果

那怎么才能让当前幻灯片“稳稳地”待在正中间，同时左右两边还能露出点内容预览呢？核心思路其实很简单：放弃原生多图 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。这个方法干净、可控，值得一试。