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.
Another interesting behavior is that carousel pause works if the button is outside the carousel.
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
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
- 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