Bootstrap 5 轮播图默认不支持触摸滑动，需手动绑定 touchstart/touchend 事件并调用 next()/prev() 方法实现左右滑动，同时注意 CSS 适配与 iOS Safari 的 touch-action 设置。
Bootstrap 5 的 carousel 默认不支持触摸滑动
Bootstrap 5 官方移除了对触摸事件（touchstart/touchmove）的原生支持，所以即使在手机上用 carousel，左右滑动手势也不会触发切换。这不是你配置错了，是设计如此——官方把这块交给了开发者自行处理或依赖第三方库。
最轻量、兼容性好且不引入额外框架的做法，是手动绑定 touchstart 和 touchend，计算滑动方向和距离，再调用 carousel 的 JS 方法触发切换。
- 只监听
touchstart和touchend，避免频繁触发touchmove影响性能 - 必须限定滑动阈值（例如
50px），防止误触导致轮播跳变 - 记得禁用
carousel的自动轮播（data-bs-interval="false"），否则触摸滑动时可能和自动播放冲突
给 .carousel 添加触摸事件监听（纯 JS 实现）
不需要 jQuery，Bootstrap 5 的 JS API 完全支持原生 DOM 操作。关键是在轮播容器上监听触摸起点和终点，记录 X 坐标差值判断方向：
const carouselEl = document.querySelector('.carousel');
let touchStartX = 0;
<p>carouselEl.addEventListener('touchstart', e => {
touchStartX = e.touches[0].clientX;
}, { passive: true });</p><p>carouselEl.addEventListener('touchend', e => {
const touchEndX = e.changedTouches[0].clientX;
const diffX = touchStartX - touchEndX;</p><p>if (Math.abs(diffX) > 50) {
const bsCarousel = bootstrap.Carousel.getInstance(carouselEl);
if (diffX > 0) {
bsCarousel.next(); // 向左滑 → 下一张
} else {
bsCarousel.prev(); // 向右滑 → 上一张
}
}
});
</p>
注意：{ passive: true } 是必须加的，否则 iOS Safari 会报警告；bootstrap.Carousel.getInstance() 要求轮播已初始化（即页面加载完且 carousel 已渲染）。
移动端图片轮播要特别注意的 CSS 适配点
光有 JS 滑动还不够，图片在小屏上容易被拉伸、裁剪错位，或滑动时出现空白间隙。几个硬性要点：
-
class="d-block w-100"，否则默认 inline 导致底部留白 - 轮播项（
.carousel-item）建议加min-height: 200px（或视口单位如min-height: 50vh），避免图片加载前高度塌陷，影响触摸区域定位 - 禁用
user-select: none或-webkit-user-drag: none，否则 iOS 上可能拦截触摸事件 - 如果用了
object-fit: cover，记得同时设object-position: center，不然高宽比失配时人脸可能被切掉
为什么不用 swiper.js？它和 Bootstrap carousel 能共存吗？
能共存，但没必要叠用。Swiper 功能强、触摸体验好，但引入后就等于放弃 Bootstrap 的 carousel 样式和 JS 控制逻辑，还要重写 HTML 结构（比如要改成 .swiper-wrapper + .swiper-slide）。如果你项目里只有一处轮播、且只需要基础滑动，手写上面那段 JS 更省资源、更可控。
真正该换 Swiper 的场景是：需要缩放、懒加载、分页器带进度条、垂直滑动、或和服务端数据动态渲染深度耦合。普通图文轮播，Bootstrap + 6 行触摸逻辑已经够用。
最容易被忽略的是：iOS Safari 在某些 viewport 设置下会“吸住”滑动，表现为拖一半停住、不触发 touchend。解决办法是给 .carousel 加 touch-action: pan-y（允许纵向滚动，但不阻止横向手势），而不是直接设 none。
