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

Question

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

我的理解是，只需将 data-touch 属性添加到代码中即可实现此功能；不需要额外的 JavaScript —— 至少，我看过的教程是这么告诉我的。但是，看来我的想法是错误的。

这是我的一个带有轮播的页面： https://neilgunner.com/page_Campaigns_1.html

任何人都可以建议为什么滑动手势不起作用，并建议修复吗？

谢谢！

Answer 1

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

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

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

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

Answer 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)

Answer 3

froggy 的答案在 Blazor 项目中对我有用。