Swipe Gesture not working in Bootstrap 4 carousel - mobile

Question

I recently build a Bootstrap 4.0 web site, using Dreamweaver, which contains several carousels. I’ve added the data-touch=”true” attribute to the code, however the swipe gesture does not work on mobile devices, and I can’t figure out why – I’m thinking either something in the code is preventing the mobile gesture from working, or there’s something missing that I need to add somewhere.
My understanding is that one simply needs to add the data-touch attribute to the code for this to work; no additional javascript is required -- at least, that's what the tutorials I've watched tell me. But, it seems I'm wrong about that.
Here’s one of my pages with a carousel:
https://neilgunner.com/page_Campaigns_1.html
Can anyone suggest why the swipe gesture is not working, and recommend a fix?
Thanks!

Answer 1

I'm late to this discussion, so I post this in case someone else stumbles in here as I did.
I'm using Bootstrap 4.5.2 and solved this by using the following:
<div id="myCarousel" class="carousel slide" data-interval="5000" data-touch="true" data-ride="carousel">
It didn't work for me without all three of the above data attributes set.

Answer 2

You can manually create the carousel-object after the DOM is loaded and the touchEvents will work. But you have to set the data-attribute for touch to true:
For Bootstrap 4.x:
HTML:
<div id="myCarousel" class="carousel slide" data-interval="false" data-touch="true" data-ride="carousel">
...
</div>
Script:
$('#myCarousel').carousel();
For Bootstrap 5.x:
HTML:
<div id="myCarousel" class="carousel slide" data-bs-interval="false" data-bs-touch="true" data-bs-ride="carousel">
...
</div>
Script:
var myCarousel = document.querySelector('#myCarousel')
var carousel = new bootstrap.Carousel(myCarousel)