<p>Bootstrap 5 移除 jQuery，需用 new bootstrap.Carousel() 初始化，确保引入 bootstrap.bundle.min.js、删除 jQuery 引用、使用 data-bs-* 属性；卡顿需加 will-change: transform 并固定图片尺寸；触摸失效需检查 TouchEvent 支持及手势库冲突；自动轮播需用 { interval: false } 禁用或调用 pause()/cycle() 控制，注意 dispose() 清理定时器。</p>
Carousel 初始化失败：$ is not a function 错误
用 bootstrap 5 写轮播图时直接报 $ is not a function，不是你写错了，是 jquery 被移除了。bootstrap 5 完全放弃 jquery 依赖，所有 js 组件改用原生 dom api 实现。
如果你在项目里还引用了旧版 Bootstrap 4 的 CDN 或本地文件，又混用了 Bootstrap 5 的 HTML 结构，就会触发这个错误。
- 确认你引入的是 Bootstrap 5.x 的 JS 文件（路径含
bootstrap.bundle.min.js，不是bootstrap.min.js） - 彻底删掉任何
<script>引入的 jQuery（包括 cdn.jsdelivr.net/npm/jquery） - 初始化不能用
$().carousel()，改用new bootstrap.Carousel() - HTML 中的
data-bs-*属性不能写成data-（比如data-bs-interval="3000"，不是data-interval）
图片滑块卡顿或跳帧：CSS transform 性能陷阱
轮播图切图时出现肉眼可见的卡顿，大概率是浏览器没走 GPU 加速，或者动画被强制同步执行。
Bootstrap 5 的 Carousel 默认用 transform: translateX() 切换，但若父容器有 overflow: hidden 且未触发硬件加速，部分浏览器（尤其是 Safari 和低端安卓）会降级为软件渲染。
- 给轮播容器（
.carousel）加will-change: transform，提前提示浏览器准备 GPU 渲染 - 确保图片尺寸固定，避免每次切换时触发 layout（推荐用
object-fit: cover+ 明确宽高，而非靠img-fluid拉伸） - 禁用过渡动画调试时可临时设
data-bs-ride="false"，再手动调用carousel.next()观察是否仍卡 - 慎用
data-bs-pause="hover"：鼠标频繁进出会打断动画队列，导致跳帧
移动端触摸滑动失效：touch 事件未启用
在手机上拖拽图片没反应，不是手势被拦截，是 Bootstrap 5 默认关闭了 touch 支持——它只在检测到 TouchEvent 构造函数存在时才启用，而某些 WebView 或调试环境会屏蔽该构造函数。
更常见的情况是：你用了第三方手势库（如 Hammer.js），它劫持了 touchstart，导致 Carousel 的原生监听器收不到事件。
- 检查控制台是否报
Cannot read property 'TouchEvent' of undefined，若有，需在初始化前手动补丁：window.TouchEvent = window.TouchEvent || function() {} - 确保轮播容器没有
pointer-events: none或touch-action: none - 若项目已用其他手势库，在初始化 Carousel 前调用
bootstrap.Carousel.getInstance(el)?.dispose()避免冲突 - 测试真机，不要只信 Chrome DevTools 的 device mode —— 它不模拟真实 touch 事件流
自动轮播停不下来：interval 控制逻辑绕过
点了左右箭头或指示点后，轮播还在继续自动播放，不是 bug，是 Bootstrap 的默认行为：用户交互仅暂停 2 秒，之后恢复。
这个“暂停”是临时的，且无法通过 HTML 属性关闭，必须用 JS 干预。
- 初始化时传
{ interval: false }可彻底禁用自动播放：new bootstrap.Carousel(el, { interval: false }) - 若需保留手动触发能力，可在点击事件中调用
carousel.pause()，并在需要时再carousel.cycle() -
data-bs-interval="0"不生效，Bootstrap 把 0 当作 falsy 值，仍启用默认 5000ms - 注意：
carousel.pause()不会清除定时器，只是暂停；carousel.dispose()才真正销毁实例和定时器
轮播图真正的复杂点不在结构，而在生命周期管理——比如 SPA 页面切换时忘记 dispose()，残留的定时器会持续触发回调，消耗内存又干扰新轮播实例。
