Topic: Carousel pause for onclick events inside carousel does not work with gestures

ming priority asked 2 years ago

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.

Marcin Luczak staff answered 2 years ago


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

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue

  • ForumUser: Priority
  • Premium support: Yes
  • Technology: MDB jQuery
  • MDB Version: MDB4 4.19.2
  • Device: iPhone, iPad
  • Browser: Chrome, Safari
  • OS: iOS
  • Provided sample code: No
  • Provided link: Yes