kolkov / ngx-gallery

A simple responsive native gallery component for Angular 8+.
https://ngx-gallery.kolkov.ru/
MIT License
115 stars 56 forks source link

Mobile: Allow swiping/scrolling up and down a page on slideshow with HammerJs #11

Closed windcloak closed 4 years ago

windcloak commented 4 years ago

Mobile only: I have HammerJs activated so that the slideshow changes on swipe left/right. But now I can't scroll up and down a page (swipe up/down) when I touch the slideshow. I have to click outside of the slideshow to do this, and my slideshow takes up most of the width of a mobile screen so it makes for a bad user experience.

https://firecloak.net/cosplay/ochaco-uraraka-schoolgirl-bnha ^ I have Bootstrap's carousel and ngx-gallery on this page. Bootstrap's carousel lets you scroll up/down the page when clicking in the Bootstrap carousel area. When I try to scroll up/down on ngx-gallery, nothing happens.

I'm assuming you have to do some kind of touch or scroll event to accomplish this. Maybe HammerJs part limits it to swipe left/right, so we have to add another event for swipe up/down? (Actually I have no idea how this would be implemented.)

kolkov commented 4 years ago

Hi! I still can not understand what you mean?

windcloak commented 4 years ago

I forgot I fixed this. I added this to the code:

import { HammerModule } from '@angular/platform-browser';

import {
  HammerGestureConfig,
  HAMMER_GESTURE_CONFIG
} from '@angular/platform-browser';

export class MyHammerConfig extends HammerGestureConfig {
  overrides = {
    pinch: { enable: false },
    rotate: { enable: false } as any
  };
}
kolkov commented 4 years ago

Thanks for the solutions.

leandroneves-net commented 3 years ago

I forgot I fixed this. I added this to the code:

import { HammerModule } from '@angular/platform-browser';

import {
  HammerGestureConfig,
  HAMMER_GESTURE_CONFIG
} from '@angular/platform-browser';

export class MyHammerConfig extends HammerGestureConfig {
  overrides = {
    pinch: { enable: false },
    rotate: { enable: false } as any
  };
}

Dear windcloak,

Could you send a 'tutorial' showing to us how get swipe working?

Thanks!