Bootstrap Carousel轮播图实现 Bootstrap如何制作图片滑块-Bootstrap教程-PHP中文网

Bootstrap 5 移除 jQuery，需用 new bootstrap.Carousel() 初始化，确保引入 bootstrap.bundle.min.js、删除 jQuery 引用、使用 data-bs-* 属性；卡顿需加 will-change: transform 并固定图片尺寸；触摸失效需检查 TouchEvent 支持及手势库冲突；自动轮播需用 { interval: false } 禁用或调用 pause()/cycle() 控制，注意 dispose() 清理定时器。

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></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 或调试环境会屏蔽该构造函数。

VPS Bootstrap

从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。

下载

更常见的情况是：你用了第三方手势库（如 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() 才真正销毁实例和定时器