本文介绍通过调整 Cycle2 的 data-cycle-carousel-visible 属性与配套 CSS，使三图可见的轮播容器中始终将当前激活幻灯片水平居中显示，解决标题与视觉焦点错位问题。
本文介绍通过调整 cycle2 的 `data-cycle-carousel-visible` 属性与配套 css，使三图可见的轮播容器中始终将当前激活幻灯片水平居中显示，解决标题与视觉焦点错位问题。
Cycle2 默认的 carousel 模式（如 data-cycle-carousel-visible="3"）会将幻灯片从左到右依次排列，激活项始终位于最左侧，即使视觉上显示三张图，实际焦点仍偏左——这导致 .slideshow-caption 显示的标题与用户直觉中的“中间那张图”不匹配。
要真正实现视觉与逻辑统一的居中效果，关键在于：放弃多图并列的 carousel 渲染逻辑，转而采用单图居中 + 左右预留空间的模拟方案。具体分两步实现：
✅ 步骤一：修改 HTML 属性
将 data-cycle-carousel-visible="3" 改为 data-cycle-carousel-visible="1"，并确保已加载 jquery.cycle2.center.min.js（官方中心化插件）：
<div class="cycle-slideshow" data-cycle-slides=".bleed-img" data-cycle-fx="carousel" data-cycle-carousel-visible="1">
data-cycle-carousel-fluid="true"
data-cycle-center-horz="true" <!-- 启用水平居中 -->
data-cycle-center-vert="false"
data-cycle-timeout="0"
data-cycle-swipe="true"
data-cycle-swipe-fx="scrollHorz"
data-cycle-prev="#prev-4"
data-cycle-next="#next-4"
data-cycle-caption="#caption-4"
data-cycle-caption-template="{{slideNum}}: {{cycleTitle}}">
<!-- 幻灯片项保持不变 -->
</div>
? 注意：data-cycle-center-horz="true" 是 jquery.cycle2.center.min.js 提供的核心能力，它会自动为当前幻灯片添加 .cycle-center 类，并配合 CSS 实现精准居中。
✅ 步骤二：优化 CSS 布局
移除原有 width: 130%; left: 50%; transform: translate(-50%, 0%) 等易引发偏移的写法，改用更稳健的居中策略：
.module-bleed-img {
position: relative;
overflow: hidden !important; /* 防止子元素溢出干扰布局 */
}
.module-bleed-img .cycle-slideshow {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
/* 移除 margin/transform，交由 center 插件控制定位 */
}
/* 强制当前幻灯片居中显示（Cycle2 center 插件自动添加此 class） */
.cycle-slideshow .cycle-center {
position: absolute !important;
left: 50% !important;
transform: translateX(-50%) !important;
z-index: 10;
}
/* 可选：为左右相邻幻灯片设置透明/缩放，营造“三图同框”视觉感 */
.cycle-slideshow .cycle-slide:not(.cycle-center) {
opacity: 0.6;
transform: scale(0.9);
transition: all 0.3s ease;
}
✅ 补充说明与注意事项
- 必须引入 jquery.cycle2.center.min.js（而非仅 carousel.min.js），否则 data-cycle-center-horz 不生效；
- 若需保留“三图可见”的视觉层次，可通过 CSS 控制非激活幻灯片的 opacity、scale 和 z-index，而非依赖 carousel-visible="3"；
- 避免对 .cycle-slideshow 设置 width > 100% 或 margin-left，这会与 center 插件的定位逻辑冲突；
- 所有幻灯片容器（.bleed-img）应具有相同宽高比，否则居中后可能出现裁剪或留白不均。
通过以上配置，Cycle2 将以语义化方式将当前幻灯片精确置于容器水平中心，{{cycleTitle}} 标题自然与视觉焦点对齐，彻底解决 caption 错位问题。
