bootstrap 5 的 carousel 默认不支持触屏滑动，因其主动移除 touchstart/touchmove 事件监听；需手动引入 hammer.js 或原生 touch 事件实现，推荐 hammer.js 并配置 swipeleft/swiperight 手势触发 next/prev。
Bootstrap 5 的 Carousel 默认不支持触屏滑动
Bootstrap 5 移除了对 touchstart / touchmove 事件的原生支持，所以即使在手机上用手指拖拽，轮播图也不会响应滑动切换。这不是 bug，是官方主动移除——因为手势逻辑容易和页面内其他滚动、缩放冲突，交由开发者按需引入。
要启用滑动，必须手动添加第三方库或自行绑定事件。最轻量且兼容性好的方案是接入 hammer.js 或使用原生 touch 事件监听。推荐前者，避免重复造轮子。
用 Hammer.js 补齐 Carousel 触屏支持（Bootstrap 5）
Hammer.js 能稳定识别 swipeleft / swiperight 手势，且与 Bootstrap 的 carousel 方法天然契合。注意：必须等 Carousel 实例初始化完成后再绑定手势，否则 getElementById 可能取不到轮播容器，或 data-bs-ride="carousel" 自启逻辑干扰事件绑定。
- 通过 CDN 引入
hammer.min.js（v2.0.8+ 即可，无需完整版） - 在
DOMContentLoaded后获取轮播 DOM 元素，再初始化Hammer实例 - 监听
swipeleft触发carousel('next')，swiperight触发carousel('prev') - 务必调用
preventDefault()阻止浏览器默认滚动行为，否则滑动会触发页面整体偏移
const carouselEl = document.getElementById('myCarousel');
if (carouselEl) {
const hammertime = new Hammer(carouselEl);
hammertime.on('swipeleft', () => carouselEl.carousel('next'));
hammertime.on('swiperight', () => carouselEl.carousel('prev'));
hammertime.get('swipe').set({ direction: Hammer.DIRECTION_HORIZONTAL });
}
为什么不用 Bootstrap 4 的 touch 参数？
Bootstrap 4 的 carousel 支持 touch: true 选项，但该参数在 Bootstrap 5 中已被彻底删除，源码里找不到任何相关逻辑。如果你在文档或旧教程里看到 data-bs-touch="true" 或 new bootstrap.Carousel(el, { touch: true })，直接忽略——它们不会生效，也不会报错，只是静默失效。
另外，部分人尝试用 CSS touch-action: pan-y 试图“修复”，这只能禁用垂直滚动，对轮播图的左右切换毫无帮助；反而可能让轮播区域无法被触摸识别。
滑动灵敏度与误触问题怎么调？
Hammer 默认的滑动阈值（threshold: 10 px）太低，容易把轻微拖动误判为 swipe，尤其在内容较多的轮播项里。建议显式提高阈值并限制方向：
- 设置
threshold: 30—— 至少滑动 30px 才触发 - 强制
direction: Hammer.DIRECTION_HORIZONTAL，避免斜向滑动误触发 - 加上
velocity: 0.3（单位 px/ms），过滤过慢的手势，防止长按后缓慢拖动也被识别
这些参数必须在 hammertime.get('swipe').set({...}) 中配置，不能写在构造函数里。
真正麻烦的是多层嵌套滚动场景：比如轮播项里有可滚动的卡片列表。这时需要在 swiperight / swipeleft 回调里判断当前是否处于“可滑动区域”顶部/底部，再决定是否移交控制权给轮播——这部分没有银弹，得结合业务逻辑做 getBoundingClientRect() 和滚动位置检测。
