bootstrap 5轮播图加缩略图需手动联动carousel与自定义导航容器，通过data-bs-slide-to或slideto()触发跳转，并在slid.bs.carousel事件中同步缩略图active态、aria-current及焦点，确保可访问性与状态一致性。
Bootstrap 5 轮播图加缩略图，必须用 carousel + 自定义导航容器
Bootstrap 官方轮播组件不内置缩略图功能，所谓“带缩略图的轮播”，本质是把 carousel 和一组可点击的缩略图（img 或 button）手动联动。不能指望 data-bs-interval 或 data-bs-ride 自动搞定缩略图高亮或跳转。
常见错误现象：click 缩略图没反应、当前项不更新、缩略图样式错乱、轮播自动播放时缩略图不同步。
- 缩略图必须用
button或带role="button"的元素，否则键盘/屏幕阅读器不可访问 - 每个缩略图需有唯一
data-bs-slide-to值（从0开始），和轮播项索引严格对齐 - 轮播初始化后，要监听
slide.bs.carousel事件来同步缩略图激活态，不能只靠初始 class - 别用
carousel-caption放缩略图——它语义和定位都不匹配，会破坏布局流
data-bs-slide-to 和 slideTo() 方法的区别与选型
触发跳转有两种方式：声明式（data-bs-slide-to）和编程式（carouselInstance.slideTo(index)）。前者简单但耦合 HTML；后者灵活，适合动态生成缩略图或需要条件判断的场景。
使用场景举例：缩略图来自 API 列表、用户点击前要校验权限、缩略图分页加载。
-
data-bs-slide-to="2"：适合静态 HTML，Bootstrap 自动绑定 click 事件，无需额外 JS -
carouselInstance.slideTo(2)：需先用bootstrap.Carousel.getOrCreateInstance()获取实例，适合逻辑复杂时调用 - 注意：如果轮播已销毁（如 tab 切换后重新渲染），
getOrCreateInstance返回新实例，旧引用失效 -
slideTo()不触发slide.bs.carousel事件？错——它会触发，但slid.bs.carousel是动画结束后才触发，同步 UI 应监听后者
缩略图激活态同步：别只改 active class
仅靠 JS 给缩略图加 active 类远远不够。Bootstrap 的轮播默认不管理缩略图状态，必须手动维护，且要考虑过渡动画、键盘焦点、ARIA 属性。
容易踩的坑：active 类加了但没删旧项、缩略图 aria-current="true" 没同步、缩略图聚焦后按空格/回车没响应。
- 每次轮播切换后，在
slid.bs.carousel回调里清空所有缩略图的active和aria-current，再给对应项设置 - 缩略图容器建议用
div role="group" aria-label="轮播缩略图导航"，提升可访问性 - 缩略图
img标签必须带alt，哪怕为空（alt=""），否则屏幕阅读器会读文件名 - 移动端点击热区小？给缩略图父元素加
padding，别只依赖img尺寸
性能与兼容性：缩略图数量多时的取舍
缩略图超过 10 张后，DOM 节点和事件监听开销明显。不是所有场景都值得全量渲染——尤其当图片源是远程 URL 时，首屏卡顿会很直观。
真实项目中更常见的做法是“懒加载缩略图”或“分页缩略图导航”，而非堆砌全部。
- 缩略图
src用data-src存，轮播切到附近项时再赋值src并触发加载 - 缩略图容器超出视口宽度？加
overflow-x: auto和scroll-snap，别用横向滚动条+JS 模拟 - IE11 已不被 Bootstrap 5 支持，若需兼容，降级用 Bootstrap 4 + 手动 polyfill
CustomEvent - 缩略图尺寸不一致？统一用
object-fit: cover+ 固定宽高，避免拉伸变形
