直接改data-bs-slide-to不能显示数字，因为Bootstrap 5的.carousel-indicators默认button内容为空，仅靠CSS控制样式；需用JS遍历button并用textContent写入i+1序号，同时调整width、height、line-height等CSS确保数字居中显示。
为什么直接改 data-bs-slide-to 不能显示数字？
Bootstrap 5 的 carousel-indicators 默认只渲染 <button>，内容为空，靠 CSS 的 ::before 或背景图控制样式。你改了 data-bs-slide-to="0" 的值，但 DOM 里没把数字塞进按钮文本节点，浏览器自然不显示数字。
怎么让每个指示器显示对应序号（0→1, 1→2…）？
最稳妥的方式是用 JS 在轮播初始化后重写指示器文本。别动 HTML 模板，也别试图用 CSS 计数器——它无法可靠读取 data-bs-slide-to 值，且不兼容 SSR 或动态增删 slide 的场景。
- 等
DOMContentLoaded触发后，选中所有.carousel-indicators button - 遍历它们，读取
dataset.bsSlideTo，转成从 1 开始的整数 - 用
textContent直接写入数字，避免 HTML 注入风险
document.addEventListener('DOMContentLoaded', () => {
const indicators = document.querySelectorAll('.carousel-indicators button');
indicators.forEach((btn, i) => {
btn.textContent = i + 1;
});
});
如果用了动态加载 slide，数字指示器会失效吗？
会。DOM 加载完时新增的 slide 对应的指示器还没生成，JS 找不到它们。必须监听轮播的 slid.bs.carousel 事件，或在插入新 slide 后手动调用更新逻辑。
- 每次调用
carousel.addSlide()（或手动 append slide 元素）后，重新查询并更新.carousel-indicators button - 或者监听
slid.bs.carousel，再执行一次上面的遍历赋值（适合仅切换、不增删的场景） - 注意：不要在
slide.bs.carousel阶段操作，此时 DOM 尚未完成切换，指示器状态可能错位
CSS 样式要同步调整吗？
要。默认小圆点宽高固定，直接塞数字会撑开或溢出。必须显式设置 width、height 和 line-height，让数字居中。
.carousel-indicators [data-bs-target] {
width: 2rem;
height: 2rem;
line-height: 2rem;
font-size: 0.875rem;
border-radius: 50%;
background-color: #ccc;
}
.carousel-indicators .active {
background-color: #0d6efd;
}
数字比圆点占空间，尤其多位数时。如果轮播超过 9 张图，建议限制最大宽度或改用「3/12」这类格式，否则指示器栏容易换行或挤压。
