本文介绍通过调整 cycle2 的 carousel 可见数量与 css 定位策略，使当前激活幻灯片在多图轮播中视觉居中，解决标题、字幕与实际高亮项错位问题。
本文介绍通过调整 cycle2 的 carousel 可见数量与 css 定位策略，使当前激活幻灯片在多图轮播中视觉居中，解决标题、字幕与实际高亮项错位问题。
Cycle2 默认的 data-cycle-carousel-visible="3" 会同时展示三张幻灯片（左、中、右），但仅最左侧幻灯片被标记为 active，导致 caption 显示与用户感知的“当前页”不一致——尤其当设计意图是让中间幻灯片作为视觉焦点时，这种行为会造成体验割裂。
核心解决方案并非强行修改 JS 行为，而是重构布局逻辑：将 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="true" <!-- 可选：垂直居中 -->
data-cycle-swipe="true"
data-cycle-swipe-fx="scrollHorz"
data-cycle-timeout="0"
data-cycle-prev="#prev-4"
data-cycle-next="#next-4"
data-cycle-caption="#caption-4"
data-cycle-caption-template="{{slideNum}}: {{cycleTitle}}">
<!-- slides... -->
</div>
✅ 步骤二：精调 CSS 实现“伪三图”视觉效果
通过容器溢出控制与子元素定位，营造左右可见边缘幻灯片的视觉暗示，同时确保当前 slide 始终居中：
.module-bleed-img {
position: relative;
overflow: hidden !important; /* 防止父容器裁剪 */
}
.module-bleed-img .cycle-slideshow {
position: relative;
width: 100%;
margin: 0 auto;
/* 关键：让 slideshow 内容可横向溢出，形成左右预览效果 */
overflow: visible !important;
}
/* 控制每张 slide 的宽度与间距，模拟 carousel 间距 */
.bleed-img {
width: 50%; /* 单张占视口一半，留出左右空间 */
padding: 0 25%; /* 左右各留25%空白，形成“三图”间隙感 */
box-sizing: border-box;
}
.bleed-img img {
width: 100%;
height: auto;
display: block;
}
? 注意事项：
- data-cycle-center-horz="true" 是启用 Cycle2 内置居中逻辑的前提，必须配合 jquery.cycle2.center.min.js；
- 避免使用 transform: translateX() 或绝对定位覆盖 Cycle2 自身的动画逻辑，否则可能引发滑动不同步；
- 若需响应式适配，建议用 max-width + margin: 0 auto 替代固定 width: 50%，并在媒体查询中动态调整 padding；
- Caption 元素（如 #caption-4）将自动绑定到当前 active slide 的 data-cycle-title，无需额外 JS 绑定。
最终效果：用户看到的是「一张清晰居中的主图 + 左右模糊/半显的相邻图」，语义上仍是单图轮播，但视觉层次更符合现代 UI 的焦点引导逻辑，且 caption 始终精准对应中央幻灯片内容。
