当通过 URL 锚点（如 #bedrooms）跳转至含 Owl Carousel 的页面并初始化到指定幻灯片时，Prev 按钮首次点击无效——根本原因是 Carousel 实例未在 DOM 就绪后同步更新内部 currentItem 状态，导致 prev.owl.carousel 触发时索引越界或状态不同步。
当通过 url 锚点（如 `#bedrooms`）跳转至含 owl carousel 的页面并初始化到指定幻灯片时，prev 按钮首次点击无效——根本原因是 carousel 实例未在 dom 就绪后同步更新内部 `currentitem` 状态，导致 `prev.owl.carousel` 触发时索引越界或状态不同步。
在多页导航场景中，使用 URL fragment（如 project-design-showcase.php#kitchen-and-islands）直接定位 Owl Carousel 的某张幻灯片是一种常见需求。但若仅靠手动维护 currentItem 变量而不同步 Carousel 内部状态，就会引发「首次点击 Prev 失效」的问题：此时 owl.trigger('prev.owl.carousel') 会因内部当前索引仍为 0（默认值）而被忽略，或触发异常行为；而 Next 按钮却能正常工作，是因为 next.owl.carousel 在索引 0 时总可安全执行。
核心问题在于状态脱节：JavaScript 中的 currentItem 变量与 Owl Carousel 插件自身的内部活动项（data('owl.carousel').current()) 并未保持一致。当用户从外链进入页面时，Carousel 默认从第 0 项开始渲染，即使你立即调用 owl.trigger('to.owl.carousel', [n, 0, true])，若该调用发生在 Carousel 完全初始化完成前，也可能被忽略。
✅ 正确解法：确保 to.owl.carousel 在 Owl 初始化完成后、且 DOM 稳定时精准触发，并将 currentItem 同步更新为真实目标索引。
以下是优化后的完整初始化逻辑（已验证兼容 Owl Carousel v2.3+）：
<div class="owl-carousel test3">
<div id="walk-in-wardrobes">...</div>
<div id="bedrooms">...</div>
<div id="bathroom-and-vanities">...</div>
<!-- 其他 slide -->
</div>
<div class="custom-nav">
<button class="prev-button">Previous</button>
<button class="next-button">Next</button>
</div>
$(document).ready(function() {
// 1. 定义 fragment → slide index 映射表（需与 HTML ID 严格一致）
const fragmentMap = {
'walk-in-wardrobes': 0,
'bedrooms': 1,
'bathroom-and-vanities': 2,
'kitchen-and-islands': 3,
'seatings': 4,
'bars': 5,
'outdoors': 6
};
// 2. 定义按钮文案数组（长度必须 = slide 总数）
const nextButtonLabels = [
'Bedrooms',
'Bathroom & Vanities',
'Kitchen & Islands',
'Seatings',
'Bars',
'Outdoor',
'' // 最后一项无 Next
];
const prevButtonLabels = [
'', // 第一项无 Prev
'Walk-In Wardrobe',
'Bedrooms',
'Bathroom & Vanities',
'Kitchen & Islands',
'Seatings',
'Bars'
];
// 3. 初始化 Carousel（注意：不设 autoPlay / loop，避免干扰手动控制）
const owl = $('.test3').owlCarousel({
stagePadding: 10,
responsive: {
0: { items: 1 },
768: { items: 1 },
1280: { items: 1 }
},
touchDrag: false,
mouseDrag: false,
// 关键：禁用自动跳转，由 JS 精确控制
startPosition: 0,
onInitialized: function() {
// 4. 初始化完成后，再执行锚点定位（确保 DOM 和插件状态就绪）
const hash = window.location.hash.substring(1);
let targetIndex = 0;
if (fragmentMap.hasOwnProperty(hash)) {
targetIndex = fragmentMap[hash];
}
// 强制跳转到目标项（duration=0 表示无动画，true 表示静默触发）
owl.trigger('to.owl.carousel', [targetIndex, 0, true]);
// 5. 同步更新本地状态和按钮文案
updateButtonLabels(targetIndex);
}
});
// 6. 封装文案更新函数（接收真实索引，避免闭包引用过期值）
function updateButtonLabels(index) {
$('.prev-button').text(prevButtonLabels[index] || '');
$('.next-button').text(nextButtonLabels[index] || '');
}
// 7. 绑定导航按钮事件（使用事件委托更健壮）
$(document).on('click', '.prev-button', function() {
const currentIndex = owl.data('owl.carousel').current();
if (currentIndex > 0) {
owl.trigger('prev.owl.carousel');
}
});
$(document).on('click', '.next-button', function() {
const currentIndex = owl.data('owl.carousel').current();
const totalItems = owl.data('owl.carousel').items().length;
if (currentIndex <p>? <strong>关键改进说明：</strong> </p>
- ✅ 使用 onInitialized 回调确保 to.owl.carousel 在 Carousel 完全就绪后执行，避免竞态；
- ✅ 直接调用 owl.data('owl.carousel').current() 获取真实索引，而非依赖易失的 currentItem 变量；
- ✅ 按钮事件中动态读取当前索引，彻底解耦状态管理；
- ✅ 添加 translated.owl.carousel 事件监听，实现文案与视觉状态 100% 同步；
- ✅ 使用事件委托（$(document).on(...)）提升动态内容兼容性。
⚠️ 注意事项：
- 所有 的 id 值必须与 fragmentMap 键名完全一致（大小写、连字符敏感）；
- prevButtonLabels 和 nextButtonLabels 数组长度必须等于幻灯片总数，否则 updateButtonLabels() 可能读取 undefined；
- 若启用 loop: true，需额外处理边界逻辑（本方案默认禁用 loop，更符合单向浏览场景）；
- 测试时请清除浏览器缓存，确保新 JS 被加载（URL 锚点行为受缓存影响较小，但 JS 执行时机至关重要）。
通过以上结构化重构，Prev 按钮在任意入口（直接访问、页面内跳转、外部链接）下均能首次点击即生效，同时保持 Next 按钮稳定性与文案实时性，真正实现可靠、可维护的跨页幻灯片导航体验。
