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