Carousel buttons broken on Chrome Mobile

[AlexanderGH]

The carousel implementation works fine on desktop Chrome, but there are two issues on mobile:

• tapping on the arrows themselves (instead of the transparent vertical bars outside the icons) will no-op.
• if you have buttons using data-bs-slide-to, they seem to be complete no-ops.

Both issues also repro by going into mobile mode in dev tools in the desktop browser, so no mobile device is needed to repro. The issue also repros on the demo/example here: https://thednp.github.io/bootstrap.native/#:~:text=()%3B-,Carousel%20Example,-This%20is%20a

[thednp]

There's a conflict of event listeners for drag and touch. Will investigate and provide a fix, but I will need your confirmation.

[thednp]

Over time the behavior of events have changed on mobile versions of browsers, first they made touch events mobile only and we adapted to those changes, now they changed again (I suspect drag events are either disabled or different on mobile) which makes it difficult to get a balance with touch, drag and pointer events so that they work properly regardless of platform.

What I'm trying to say is that I encountered this issue a while back and I've been looking for a solution since. It might take some time, I'm currently working on it, but I'm open to any community feedback and suggestions.

[thednp]

@AlexanderGH please confirm my fix works for you!

Sorry for the delay.

[AlexanderGH]

Thanks for the quick fix! You're faster than many github projects :)

5.1.6 seems to fix the arrow buttons on the side (and swiping still works), but I also have some data-bs-slide-to buttons to jump directly to some slides and sadly those still do not work.

[thednp]

Thanks for the quick fix! You're faster than many github projects :)

5.1.6 seems to fix the arrow buttons on the side (and swiping still works), but I also have some data-bs-slide-to buttons to jump directly to some slides and sadly those still do not work.

This is something I cannot confirm on my end. Can you provide a test site?

[AlexanderGH]

Something weird is going on. I have two pages with the same structure but different data I show and on one the data-bs-slide-to selectors work, on the other they do not. The dev console doesn't show any errors. I'll try to dig deeper on my end (since it is now looking like it's somehow my bug since on a simple case it works as of the latest release) and report back. Thanks again for the quick response!

[AlexanderGH]

So I figured out what was causing my issue, but not sure why it sometimes worked. I had my list of buttons inside the .carousel (but outside the .carousel-inner. Moving the buttons totally outside the carousel fixed it on the page(s) it didn't work. Maybe there's some % based height overlay that would intercept the clicks on mobile? The page where it was broken had several rows of buttons vs the working one only had a couple of buttons. Let me know if you're still interested me trying to create a minimal repo case (i usually don't share links to real sites).

[thednp]

Interactive elements outside the .carousel element must use data-bs-target="my-carousel-id", moving interactive inside and outside of the .carousel element must take this attribute into account.

[AlexanderGH]

To clarify, i had that attribute, and things always worked fine before and after on desktop. There is just something that seemed to break in some unknown scenario on mobile if they were inside the .carousel.

[thednp]

That is why a demo setup would be helpful to me to understand and solve any issue.