Carousel pause for onclick events inside carousel does not w


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

ming pro premium priority asked 7 months 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 7 months ago

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


Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Answered

Specification of the issue
  • 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