滑动手势在 Bootstrap 4 轮播中不起作用答案

【问题标题】：Swipe Gesture not working in Bootstrap 4 carousel滑动手势在 Bootstrap 4 轮播中不起作用
【发布时间】：2020-04-25 04:33:45
【问题描述】：

我最近使用 Dreamweaver 构建了一个 Bootstrap 4.0 网站，其中包含几个轮播。我在代码中添加了 data-touch=”true” 属性，但是滑动手势在移动设备上不起作用，我不知道为什么——我认为代码中的某些东西阻止了移动设备工作中的手势，或者我需要在某处添加一些东西。

我的理解是，只需在代码中添加 data-touch 属性即可；不需要额外的 javascript —— 至少，这是我看过的教程告诉我的。但是，这似乎我错了。

谁能建议为什么滑动手势不起作用，并推荐修复方法？

谢谢！

【问题讨论】：

这能回答你的问题吗？ How to make Bootstrap carousel slider use mobile left/right swipe
遗憾的是，这个解决方案在我的情况下不起作用。我在页面底部添加了脚本（当然还有我的轮播的 id！），但它没有起到作用。不过还是谢谢你的建议！
对于关注此线程的任何人，我很高兴地说滑动手势现在可以在我的轮播中使用。原因：我将我的网站从 Bootstrap 4.0 更新到了 Bootstrap 4.3。相同的代码，但现在 data-touch="true" 可以工作，这要归功于更新的 Bootstrap 框架。仅供遇到同样问题的人参考。
你好，我使用的是 bootstrap 4.5.3，触摸是原生的。但是，在您触摸两个箭头之一移动到下一个/上一个图像之前，它不起作用；然后它开始工作，其他人有同样的问题吗？提前谢谢你:)
我也有这种经历。我没有解决方案，但我认为正在发生的事情是，必须“激活”箭头，即触摸箭头向浏览器表明箭头处于活动状态，现在应该应用滑动手势

【解决方案1】：

我迟到了这个讨论，所以我发布这个以防其他人像我一样在这里绊倒。

我正在使用 Bootstrap 4.5.2 并使用以下方法解决了这个问题：

<div id="myCarousel" class="carousel slide" data-interval="5000" data-touch="true" data-ride="carousel">

如果没有设置上述所有三个数据属性，它对我不起作用。

【讨论】：

【解决方案2】：

您可以在加载 DOM 后手动创建轮播对象，并且 touchEvents 将起作用。但是您必须将 touch 的数据属性设置为 true：

对于 Bootstrap 4.x：

HTML：

<div id="myCarousel" class="carousel slide" data-interval="false" data-touch="true" data-ride="carousel">
...
</div>

脚本：

$('#myCarousel').carousel();

对于 Bootstrap 5.x：

HTML：

<div id="myCarousel" class="carousel slide" data-bs-interval="false" data-bs-touch="true" data-bs-ride="carousel">
...
</div>

脚本：

var myCarousel = document.querySelector('#myCarousel')
var carousel = new bootstrap.Carousel(myCarousel)

【讨论】：