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

imageSwipe/thumbnailsSwipe not working #76

Closed giorgikh93 closed 12 months ago

giorgikh93 commented 3 years ago

imageSwipe/thumbnailsSwipe on angular 10 not working, any solutions for that ?

ngOnInit() { this.galleryOptions = [ { width: '456px', height: '672px', thumbnailsColumns: 5, imageAnimation: NgxGalleryAnimation.Fade, arrowNextIcon: 'fa fa-angle-right', arrowPrevIcon: 'fa fa-angle-left', thumbnailsArrows: false, thumbnailsSwipe: true, preview: false, thumbnailsMargin: 24, thumbnailsPercent: 15, imageArrowsAutoHide:true, imageSwipe:true, // imageAutoPlay:true }, // max-width 800 { breakpoint: 800, width: '100%', height: '600px', imagePercent: 80, thumbnailsPercent: 20, thumbnailsMargin: 20, thumbnailMargin: 20, }, // max-width 400 { breakpoint: 400,

  }
];

packages.json "dependencies": { "@angular/animations": "~10.2.0", "@angular/common": "~10.2.0", "@angular/compiler": "~10.2.0", "@angular/core": "~10.2.0", "@angular/forms": "~10.2.0", "@angular/platform-browser": "~10.2.0", "@angular/platform-browser-dynamic": "~10.2.0", "@angular/router": "~10.2.0", "@kolkov/ngx-gallery": "^1.2.3", "font-awesome": "^4.7.0", "hammerjs": "^2.0.8", "intl-tel-input": "^17.0.13", "ng2-tel-input": "^2.3.0", "rxjs": "~6.6.0", "tslib": "^2.0.0", "zone.js": "~0.10.2" },

bountyface commented 2 years ago

You need hammer.js and include it in your module (since Angular 9):

npm install hammerjs --save

app.module.ts

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

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    HammerModule,
    .
    .
    .
  ]

your-component.ts import 'hammerjs';

Now imageSwipe and previewSwipe are working again, yet the thumbnails still won't swipe. @kolkov can you help us?