如何在Bootstrap Carousel中同时支持捏合缩放与滑动切换功能

解决方案 #

你之前的CSS不生效是因为选择器写错了，Bootstrap Carousel默认不会给容器添加.pointer-event类，同时默认的Carousel JS逻辑会主动拦截触摸事件，导致原生捏合缩放手势被屏蔽，需要同时调整CSS和JS逻辑实现两种手势共存：

1. 修正CSS配置

设置正确的触摸行为权限，允许垂直滚动和捏合缩放，保留水平滑动能力：

.carousel, .carousel-item img {
  touch-action: pan-y pinch-zoom;
}

2. 调整Carousel触摸事件拦截逻辑

默认的Carousel JS会在单/多点触摸时都阻止默认行为，需要添加事件监听，当检测到双指触摸（捏合场景）时不拦截事件：

$('.carousel').on('touchstart touchmove', function (e) {
  // 触摸点数大于1时为捏合手势，终止事件冒泡到Carousel默认处理逻辑
  if (e.originalEvent.touches.length > 1) {
    e.stopImmediatePropagation();
    return true;
  }
});

如果上述JS逻辑不生效，可在初始化Carousel时关闭默认触摸处理，自行实现滑动逻辑，或修改Bootstrap源码中Carousel原型的_touchMove方法，仅在单指触摸时执行preventDefault即可。

修改完成后即可同时支持单指左右滑动切轮播、双指捏合缩放图片的交互。

内容的提问来源于stack exchange，提问作者Abdo Rabah