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

Question

我最近使用Dreamweaver构建了一个Bootstrap 4.0网站，其中包含几个carousel。我已经在代码中添加了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之后手动创建carousel-object。但您必须将touch的data-attribute设置为true：

用于引导4.x的：

HTML：

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

脚本：

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

用于引导程序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)