用 bootstrap-modal 手动实现图片全屏轮播需禁用 carousel 自动初始化，通过 data-index 传索引，在 shown.bs.modal 中调用 to() 切换；绑定键盘/滚轮事件并手动聚焦模态框；为 img 添加 onerror fallback，统一用 object-fit: contain 居中。
用 bootstrap-modal 手动实现图片全屏轮播，不依赖 bootstrap-carousel
bootstrap 自带的 carousel 组件不适合“点击单张图再启动幻灯片”这个场景——它默认自动初始化、预加载所有图、无法从任意图开始。真要实现「点哪张播哪张」，得自己搭模态框 + 轮播逻辑。
核心思路是：用 bootstrap-modal 做容器，手动控制 img 标签切换，监听键盘/箭头事件，维护当前索引。
- 别把
carousel的data-bs-ride="carousel"加到模态框里，它会抢控权，导致点击跳转失效 - 所有图片路径必须提前在 HTML 中写死（或由 JS 注入），不能靠 AJAX 异步加载后再初始化轮播，否则
next()/prev()会找不到目标节点 - 模态框的
tabindex和focus行为会影响键盘导航，建议显式设置autofocus="false"并手动管理焦点
data-bs-target 和 data-bs-slide-to 怎么配合传参
原生 Bootstrap 不支持直接传「当前点击图的索引」进模态框。得靠自定义 data- 属性中转。
常见错误：给每个缩略图加 data-bs-slide-to="2"，但模态框里的 carousel 没初始化，或者没监听 shown.bs.modal 事件去调用 carousel.to(2)。
- 缩略图写法：
<img src="a.jpg" data-index="0" data-bs-toggle="modal" data-bs-target="#imageModal"> - 模态框里不要放
carousel-indicators或carousel-control-next的初始 HTML，等 JS 动态生成更可控 - 在
show.bs.modal事件里读取触发元素的dataset.index，再调用myCarousel.to(index) - 如果用的是 Bootstrap 5.3+，
to()方法存在；5.2 及更早需用slideTo()（非公开 API，不稳定）
键盘方向键和鼠标滚轮怎么绑定到模态框内
默认情况下，模态框会拦截 Escape 关闭，但 ArrowLeft/ArrowRight 不会自动触发轮播——因为 carousel 的键盘支持只作用于已初始化且有焦点的轮播容器，而模态框打开后焦点常在 modal-dialog 或首个可聚焦元素上。
- 必须在
shown.bs.modal后，对#imageModal调用focus()，否则键盘事件不冒泡到轮播区域 - 鼠标滚轮需单独监听：
modalElement.addEventListener('wheel', e => { e.deltaX > 0 ? carousel.next() : carousel.prev(); })，注意防抖 - 别用
keydown监听整个document，否则关闭模态框后还响应，造成误操作 - 移动端需要额外处理
touchstart/touchend计算滑动方向，carousel自带的 touch 支持默认关闭（data-bs-touch="false"），得显式设为true
图片加载失败时如何 fallback 到占位图并跳过该帧
轮播过程中某张图 404，carousel 不会自动跳过，而是卡在空白或报错 TypeError: Cannot read property 'naturalWidth' of null（尤其在 slide 过渡动画中）。
- 每张
img标签必须加onerror="this.style.display='none'; this.nextElementSibling?.style.display='block'"，配合隐藏的<div class="placeholder">加载失败</div> - 在
slid.bs.carousel事件里检查e.relatedTarget.naturalWidth === 0，如果是，立即调用carousel.next()跳过 - 服务端返回的图片 URL 建议带校验参数（如
?v=hash），避免强缓存导致 404 状态被浏览器缓存住 - 不要用
background-image替代img标签——carousel只识别img元素，且无法获取其尺寸用于居中
最麻烦的其实是图片宽高比不一致时的垂直居中：CSS 的 object-fit: contain 是基础，但得配合 max-height: 80vh 和 margin: auto，不然小图会贴顶，大图会被裁。
