I've dropped in this jquery carousel: (https://www.jqueryscript.net/slider/Beautiful-Horizontal-Image-Carousel-Plugin-with-jQuery-CSS3-Hover-Carousel.html#google_vignette) and customised it got it working in mobile, works fine in browser, but when you try to click on it in mobile device, (using iPhone to test) it jumps to a random li a in the carousel and loads the wrong page... see here:
Anyone know whats happening here?
Thanks,
Tried amending and commenting out bits of CSS but still looking for a fix for device?
This slider behaves like this specifically because of the design. The slider you are using was last updated 10 years ago, and the source code has mouseenter and mousemove events that trigger the carousel to move based on the mouse position.
The problem with this is that these events do not translate well to mobile because tapping on the carousel causes the mouseenter event to trigger. These event listeners take priority over the tap, which makes the carousel move first, then allows the link click in the propagation stack, which at this point triggers a different link.
This slider has been updated 4 years ago when it was converted to vanilla JS, but it still has the same issue. I don't think that mobile UX was really a focus for this developer, hence the issues with it.
I'd recommend giving Slick a try. It can handle making each image in the carousel a link and has touchmove events for mobile that are much better for phones. I used Slick to make an entire medical survey to slide between each question as an entire div on the page and it worked great.