Topic: Carousel pause for onclick events inside carousel does not work with gestures
I want to make the carousel stop if the user clicks on certain buttons on the cards inside the carousel. It works fine on desktop, but not with mobile gestures.
To reproduce: the full-screen version of this snippet works on the desktop view regardless of screen size, but not with mobile gestures.
Another interesting behavior is that carousel pause works if the button is outside the carousel.
Hi,
This is related to the carousel behavior inside the touch devices and the pause option : Carousel options. By default pause is set to hover which for mobile devices after touchend event causes a carousel pause for 2 cycles and then resume. This behavior overwrites global pause, so when you click the button inside the card you globally pause the carousel, but also trigger default pause behavior for mobile devices.
To disable this auto resuming, please add data-pause="true" to your carousel element.
Keep coding, Marcin
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- Premium support: No
- Technology: MDB jQuery
- MDB Version: MDB4 4.19.2
- Device: iPhone, iPad
- Browser: Chrome, Safari
- OS: iOS
- Provided sample code: No
- Provided link: Yes