1

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!

  • Does this answer your question? [How to make Bootstrap carousel slider use mobile left/right swipe](https://stackoverflow.com/questions/21349984/how-to-make-bootstrap-carousel-slider-use-mobile-left-right-swipe) – parag patel Jan 07 '20 at 19:06
  • Sadly, this solution did not work in my case. I added the script (with the id for my carousel, of course!) at the bottom of my page but it did not do the trick. Thank you for the suggestion though! –  Jan 08 '20 at 00:43
  • 2
    For anyone following this thread, I'm pleased to say the swipe gesture is now working on my carousels. The reason: I updated my site from Bootstrap 4.0 to Bootstrap 4.3. Same code, but now, data-touch="true" works, thanks to the updated Bootstrap framework. FYI for anyone experience the same issue. –  Jan 10 '20 at 01:05
  • 4
    hello, I'm using bootstrap 4.5.3 and the touch is native. however it does not work until you touch one of the two arrows to move to the next/previous image; then it starts working, does anyone else has the same problem? thank you in advance :) – Camaleo Dec 10 '20 at 17:28
  • 1
    I have this experience as well. I don't have a solution, but I think what's happening is, one has to "activate" the arrows, ie, touching the arrow indicates to the browser that the arrow is active and swipe gestures should now apply –  Dec 11 '20 at 19:16
  • I can also confirm the problem. I fixed the swiping at least by calling $(...).carousel('cycle');and immediately calling $(...).carousel('pause'); after that. But unfortunately that does seem to break some links on iOS devices (you have to double tap them). The broken links where on a completely other area on my page. I would also be very happy, if someone finds a fix and posts it here. – Grimm Jan 25 '21 at 15:28

2 Answers2

0

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.

Mark
  • 209
  • 1
  • 4
  • But with this solution, the carousel won't swipe on the first slide. Only if you click on one of the navigation arrows, swipe gets enabled. I need it on slide 1 as well. – basZero Jan 27 '23 at 06:59
0

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)
froggy
  • 1