Carousel 默认不支持缩略图预览，因其仅提供基础轮播逻辑，缩略图需手动通过 slid.bs.carousel 事件同步 active 状态、响应式布局适配及 touch 滚动优化实现。
为什么 carousel 默认不支持缩略图预览？
Bootstrap 的 carousel 组件本身只负责轮播逻辑和基础 UI，缩略图预览属于增强交互，官方未内置。你看到的“带缩略图”的效果，其实是靠手动绑定 slide.bs.carousel 事件 + 操作缩略图容器的 active 类实现的，不是开箱即用的功能。
常见错误是直接套用文档里的基础示例，然后发现缩略图点不动、不同步、或在小屏上错位——根本原因在于没处理响应式缩略图容器的布局切换（比如从横向 grid 变成纵向 flex），也没监听移动端 touch 事件。
- 缩略图必须和轮播项一一对应，
data-bs-slide-to值要与carousel-item索引严格一致 - 缩略图容器建议用
flex布局而非grid，避免小屏下换行错乱 - Bootstrap 5.3+ 中，
slide.bs.carousel事件触发时机早于 DOM 更新，要用slid.bs.carousel才能准确同步 active 状态
如何让缩略图在手机上可滑动且不卡顿？
原生 carousel-indicators 是静态点状指示器，换成缩略图后，小屏下若内容多就会溢出。不能只靠 overflow-x: auto，得配合 touch 优化和性能控制。
关键点在于：禁用缩略图容器的默认滚动惯性（iOS Safari 会卡顿），并限制缩略图宽度防止重排。
- 给缩略图父容器加
class="d-flex overflow-auto"和style="-webkit-overflow-scrolling: touch; scroll-behavior: smooth;" - 每个缩略图用
flex-shrink-0防止被压缩，固定宽度如width: 80px（PC）或width: 60px（移动端） - 避免在缩略图
img上设height: 100%，改用object-fit: cover+ 明确宽高比容器，否则 resize 时重绘频繁
carousel 和缩略图如何双向同步？
点击缩略图跳转轮播项容易，但轮播自动播放或键盘切换时缩略图不同步，就说明事件监听漏了。必须同时处理用户操作和程序触发两种路径。
核心是统一用 slid.bs.carousel 事件更新缩略图 active 状态，并在缩略图 click 里调用 carousel('to', index)。
- 缩略图 click 事件里，先
event.preventDefault()，再$('#myCarousel').carousel('to', index) - 监听
slid.bs.carousel后，用$(this).find('.carousel-item.active').index()获取当前索引，再激活对应缩略图 - 别用
$('.thumbnail').eq(index).addClass('active')这种写法——如果缩略图有隐藏项（比如响应式隐藏部分），索引会错位；应通过data-bs-slide-to匹配
缩略图图片加载失败时怎么 fallback？
轮播图常从 CMS 或 API 动态生成，缩略图 src 404 会导致布局塌陷或空白块。Bootstrap 不处理这个，得自己加兜底。
最轻量的方式是在 img 标签上加 onerror 行内 handler，但要注意不要污染全局作用域。
- 推荐写法：
<img src="thumb.jpg" onerror="this.src='data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' width=\'80\' height=\'60\' viewBox=\'0 0 80 60\'%3E%3Crect width=\'100%\' height=\'100%\' fill=\'%23e9ecef\'/%3E%3Ctext x=\'50%\' y=\'50%\' dominant-baseline=\'middle\' text-anchor=\'middle\' font-size=\'12\' fill=\'%236c757d\'%3ENo Image%3C/text%3E%3C/svg%3E';" - 避免用 JS 统一 bind error 事件——轮播初始化前缩略图可能已加载失败，事件监听来不及
- 如果缩略图来自接口，服务端应返回占位符 URL 而非空字符串，减少前端判断逻辑
