CODEWITHSUNDEEP
mobilebootstrap-4carouselswipe
user12669096
user12669096

Reputation:

Swipe Gesture not working in Bootstrap 4 carousel

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!

Upvotes: 1

Views: 9636

Answers (2)

froggy
froggy

Reputation: 1

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)

Upvotes: 0

Mark
Mark

Reputation: 209

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.

Upvotes: 0

Related Questions