Bugs in Carrousel on Mobil


Topic: Bugs in Carrousel on Mobil

Carlos Ernesto Bernal Hernández pro premium asked 3 years ago

**Expected behavior**Hello Recently I am trying to implement an ecommerce using mdbootstrap and carousel as homepage**Actual behavior**When I navigate on mobil Can`t scroll up or down when tap at the image**Resources (screenshots, code snippets etc.)**


Bartosz Termena staff answered 3 years ago

Dear @Carlos Ernesto Bernal Hernández

Just add a global HammerJS config in app.module.ts file, below is an example of how to do it:

import { HammerGestureConfig, HAMMER_GESTURE_CONFIG } from '@angular/platform-browser';
declare var Hammer: any;

export class MyHammerConfig extends HammerGestureConfig {
  overrides = <any> {
    'pan': { direction: Hammer.DIRECTION_All },
    'swipe': { direction: Hammer.DIRECTION_VERTICAL },
  };

  buildHammer(element: HTMLElement) {
    const mc = new Hammer(element, {
      touchAction: 'auto',
          inputClass: Hammer.SUPPORT_POINTER_EVENTS ? Hammer.PointerEventInput : Hammer.TouchInput,
          recognizers: [
            [Hammer.Swipe, {
              direction: Hammer.DIRECTION_HORIZONTAL
            }]
          ]
    });
    return mc;
  }
}

@NgModule({
  declarations: [
  ...
  ],
  imports: [
  ...
  ],
  providers: [
  ...,
    {
      provide: HAMMER_GESTURE_CONFIG,
      useClass: MyHammerConfig
    }
  ],
})

For more information check this out: https://mdbootstrap.com/docs/angular/advanced/mobile/

Hope it helps!

Best Regards, Bartosz.


enter image description here This is the picture when i am testing then i am scrolling with my finger and the screen is sticky at all, dont allow any movement


Este es el codigo que estoy usando Second slide


Este es el codigo que estoy usando Second slide


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: Yes
  • Technology: MDB Angular
  • MDB Version: 8.1.1
  • Device: IPhone
  • Browser: Safari
  • OS: iOS
  • Provided sample code: No
  • Provided link: No