bootstrap 5 默认禁用触屏滑动，需手动实现：原生 touch 事件或 hammer.js，关键在于绑定到.carousel容器、确保实例就绪、设置合理阈值并阻止默认滚动。
Bootstrap 5 的 carousel 默认完全不响应触屏滑动——这不是遗漏，是官方主动移除。所谓“设置支持滑动”，本质是手动补上手势逻辑，而不是开个开关。
为什么 data-bs-touch="true" 和 touch-action: pan-y 都没用
Bootstrap 5 彻底删掉了所有 touch 相关的初始化参数和 DOM 属性：data-bs-touch、touch: true 等写法不会报错，但也不会触发任何事件监听。同理，touch-action: pan-y 只影响浏览器原生滚动行为，对轮播切换毫无作用；反而可能让容器彻底收不到 touchstart 事件。
- 检查控制台是否报
Uncaught TypeError: Cannot read property 'touch' of undefined—— 这说明你还在用 Bootstrap 4 的写法 - 打开开发者工具，在轮播容器上右键 → “Break on” → “attribute modifications”，看是否有 touch 相关属性被动态添加（实际不会有）
- 确认你引入的是
bootstrap.bundle.min.js（含 Popper），不是仅 CSS +bootstrap.min.js
用原生 touch 事件实现滑动（轻量首选）
不依赖第三方库，只需监听 touchstart 和 touchend，在 touchend 中计算水平位移差并调用 carousel('next') 或 carousel('prev')。关键点在于时机和阈值。
- 必须等 Carousel 实例就绪后再绑定事件：用
bootstrap.Carousel.getInstance(el)确保实例存在，避免carousel('next')调用失败 - 监听对象必须是整个
.carousel容器（如#myCarousel），不能只绑在.carousel-item上——否则手指落在指示器、空白处或过渡动画区域时失效 -
Math.abs(startX - endX) > 30是推荐阈值：小于 25 易误触（轻微抖动就切），大于 40 则需拖很长距离才响应 - 务必在
touchend回调里加e.preventDefault()，否则页面会跟着手指上下滚动，轮播图却不动
const carouselEl = document.getElementById('myCarousel');
const carousel = bootstrap.Carousel.getInstance(carouselEl);
let startX = 0;
<p>carouselEl.addEventListener('touchstart', e => {
startX = e.touches[0].clientX;
});</p><p>carouselEl.addEventListener('touchend', e => {
const endX = e.changedTouches[0].clientX;
const diff = startX - endX;</p><p>if (Math.abs(diff) > 30) {
e.preventDefault();
if (diff > 0) carousel.next();
else carousel.prev();
}
});
</p>
用 Hammer.js 补手势（兼容性更稳）
如果你的项目已用 Hammer.js，或需要稳定识别 swipe 手势（比如防抖、多点容错），它比原生事件更鲁棒。但注意初始化顺序和 preventDefault 配置。
- CDN 引入
hammer.min.js（v2.0.8+ 即可，无需完整版） - Hammer 实例必须绑定到
.carousel容器，且要在DOMContentLoaded后、Carousel 初始化完成之后创建 - 调用
hammertime.get('swipe').set({ threshold: 50, velocity: 0.3 })可调灵敏度：threshold控制最小滑动距离，velocity控制速度下限，避免慢速拖拽误触发 - 必须设
preventDefault: true，否则仍会触发页面滚动
最常被忽略的一点：无论用哪种方案，都得确保 carouselEl 是绝对定位容器（position: relative），且父级没有 overflow: hidden 裁剪掉事件捕获区域——真机测试时，手指落在边缘却无响应，八成是这个原因。
