必须先获取 Carousel 实例对象才能调用 slide、next、prev 等方法：推荐使用 bootstrap.Carousel.getInstance(el) 获取已存在实例；或用 new bootstrap.Carousel(selector, options) 手动初始化（避免与 data-bs-ride 冲突）；调用前需确保 DOM 就绪且 _isSliding 为 false，否则易导致无效操作或卡顿。
如何用 JS 获取并调用 Carousel 实例方法
必须先拿到实例对象，才能调用 slide、next、prev 等方法。直接在 DOM 元素上调用会报错：carousel is not a function 或 undefined is not a function。
两种可靠方式：
- 用
bootstrap.Carousel.getInstance()获取已存在的实例（推荐）：const carousel = bootstrap.Carousel.getInstance(document.getElementById('myCarousel')); - 用
new bootstrap.Carousel()手动初始化（适合移除data-bs-ride="carousel"后的场景）：const carousel = new bootstrap.Carousel('#myCarousel', { interval: 4000 });
注意：如果页面中已有通过 data-bs-ride 自动初始化的轮播，再执行 new bootstrap.Carousel() 会创建重复实例，可能引发状态错乱。
常用方法调用与参数说明
carousel.next() 和 carousel.prev() 是最轻量的切换方式，不依赖事件监听，也不校验当前是否正在动画中。
-
carousel.to(index)：跳转到指定索引（从 0 开始），比连续调用next()更精准；若index超出范围，会静默失败（不抛错，也不切换） -
carousel.pause()：暂停自动轮播计时器，但不会中断正在进行的切换动画 -
carousel.cycle()：恢复自动轮播，重置间隔计时器（从当前时间起重新计 3 秒或你设的值） -
carousel.slide(direction, element)：底层方法，一般不用直接调；direction只接受'prev'或'next'字符串
所有方法都返回 undefined，不能链式调用。想“切完立刻停”，得写两行：carousel.next(); carousel.pause();
调用前必须检查的两个状态
盲目调用 next() 或 to() 容易导致卡顿或无效操作，尤其在用户快速连点时。
- 检查是否正在动画：
carousel._isSliding === true（这是私有属性，但目前稳定可用）；更稳妥的是监听slide.bs.carousel事件，在它触发后禁止新操作，等slid.bs.carousel再放开 - 确认元素存在且已渲染：
document.getElementById('myCarousel')返回null，说明 DOM 还没就绪；确保 JS 在DOMContentLoaded后执行，或把脚本放</body>前
没做这两步，常见现象是：点一次没反应、连点两次只动一格、最后一张反复切不动。
为什么 carousel('next') 在 jQuery 里能用，原生却不行
这是历史兼容层造成的错觉。Bootstrap 5 官方已完全移除 jQuery 依赖，$(el).carousel('next') 背后仍是调用原生实例方法——只是 jQuery 插件封装了一层代理逻辑。
- 如果你项目里还混用 jQuery，确保加载顺序：先
popper.js，再bootstrap.js，最后jquery.js（否则$().carousel()会报未定义） - 原生环境别写
carousel('next')，这语法只存在于 jQuery 版本；原生必须是carousel.next() - 用
jQuery.fn.carousel.Constructor可以拿到原生类，但没必要绕这么远——直接用bootstrap.Carousel.getInstance()更直白
最容易被忽略的是：很多人复制了旧版 jQuery 教程代码，却在纯 Bootstrap 5 环境下运行，结果所有 .carousel('next') 全部静默失效，控制台还不报错。
