Bugs in Carrousel on Mobil

Topic: Bugs in Carrousel on Mobil

Carlos Ernesto Bernal Hernández asked 5 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.)**

Add comment

Bartosz Termena staff answered 5 years ago

1 0 Best answer

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.

Add comment

Carlos Ernesto Bernal Hernández answered 5 years ago

0 0 Best answer

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