Bug: Can't swipe slides in carousel on mobile Safari/Chrome

[artolshansky]

Bug description or feature request:

After first swipe can't swipe other slides in the carousel on mobile Safari/Chrome

Environment:

Demo - https://ngu-carousel.firebaseapp.com/ - Fixed-width demo Device - iPhone 7, iOS 11.4

STR:

• Open https://ngu-carousel.firebaseapp.com/ in mobile safari/chrome
• Go to Fixed-width demo (in bottom of the site)
• Try swipe few slides

Actual result:

After first swipe carousel stopped

Expected result:

Carousel change slide after each swipe

P.S. Slides changes by arrow buttons, but don't change by swipe

[artolshansky]

@sheikalthaf FYA

[Rzpeg]

Mobile Firefox the same issue

[shansubra]

Try this:

In app.module.ts add these lines:

import * as Hammer from 'hammerjs';
  import { HammerGestureConfig, HAMMER_GESTURE_CONFIG } from '@angular/platform-browser';

  export class HammerConfig extends HammerGestureConfig {
    overrides = <any>{
      'swipe': { direction: Hammer.DIRECTION_ALL }
    };
  }

@NgModule({
    declarations: [
      AppComponent
    ],
    imports: [
      BrowserModule
    ],
    providers: [
      {
        provide: HAMMER_GESTURE_CONFIG,
        useClass: HammerConfig
      }
    ],
    bootstrap: [AppComponent]
  })
  export class AppModule { }

[artolshansky]

@shansubra still not working in my project

[shansubra]

Interesting... I had the same issue and its working fine for me after this fix.

[shansubra]

Have you applied the above changes to this site https://ngu-carousel.firebaseapp.com/?

[IITAdvisors]

Hi, I have a similar problem. In my case, I have 4 items displayed at once (that is: I have 20 items, and I display them in groups of 4) I have tried in Chrome and in Safari. Not working. I already added that piece of code.

You can swipe, but when you release the finger of the screen it returns to it's original position. Next and Prev buttons are working fine. Pinpoints are working fine also.

ng-version="6.1.0"

[gaestradaaedo]

I'm also having this problem. I tried adding the implementation from @shansubra but I get an error on the export class AppModule when I add the

export class HammerConfig extends HammerGestureConfig {
    overrides = <any>{
      'swipe': { direction: Hammer.DIRECTION_ALL }
    };
  }

Can you please share an example of how your file is?

[IITAdvisors]

@gaestradaaedo Did you import "the things"?

I show you what I added... but, It didn't work to me.

// Touch gestures not working in Safari fix
import * as Hammer from 'hammerjs';
import { HammerGestureConfig, HAMMER_GESTURE_CONFIG } from '@angular/platform-browser';

And in the providers part (I show you my last provider, delete it!

  otherPrivders,
    {
      provide: HAMMER_GESTURE_CONFIG,
      useClass: HammerConfig
    }],

Still not working.

[gaestradaaedo]

I imported everything as @shansubra did but even after the import, I added the class and I get an error in the AppModule. So that's why I want to see the full implementation to see how it works or should work.

Have you found any solution @IITAdvisors?

[IITAdvisors]

There's nothing else apart from what @shansubra wrote.

Besides, maybe sharing with us your app.module.ts would help, maybe you ng version, the exact error you receive...

And finally, I am also asking for help, so, I guess that I might be the right person to help you :)

[shansubra]

Ok guys. Finally I found it and this time its working fine completely (tested my localhost app in both ios and android).

First of all, I want to apologize for not testing it in real iphone before (since its a localhost project) and I just tested in Chrome emulator (by selecting iphone 6/7/8) and thought its working fine but then later as many of you reported its not working in iphone I somehow managed to run my localhost app in iphone and found that after the first pan the listener crashes and not working anymore. I tried various things but nothing worked and I was pretty sure something has to be done with child/parent element (i.e. ngu-items/ngu-carousel) width since it worked for the first time and not after that. At last I found this post which helped me to solve this issue.

https://github.com/hammerjs/hammer.js/issues/1054

What you need to do: 1) Remove all the app.module.ts code I suggested above (sorry again). 2) Go to this folder in your application: node_modules\@ngu\carousel\src\ngu-carousel 3) Open ngu-carousel.component.js file 4) Find NguCarouselComponent.prototype.touch function 5) Replace this line: var hammertime = new Hammer(this.carouselInner); with this one var hammertime = new Hammer(this.carouselMain); 6) Save changes... That's it and no need to change anything else and your app should work fine in iphone now. 7) Finally let me know if it works :)

If you didn't read the above link and wondering why it didn't work before.. This is the reason (based on the excerpt from the other thread): "on desktop, the element will have a width equal to the sum of its children - it extends across its entire contents. on mobile, it's width was equal to 100% of its parent".

@sheikalthaf - maybe you should implement this fix in the component. Btw, thanks a lot for this wonderful component.

[IITAdvisors]

Thanks @shansubra it seems to work now. I will test iOS in the next days.

Thanks for your efforts!

[prashantkapate]

Is it possible work the similar changes in Desktop? Observe it works but result is in consist. Sometime it's sliding.

[prashantkapate]

https://ngu-carousel.firebaseapp.com/ In this example how tile is working. Can we get the that code. I am using ngx-carousel. Using arrow it's fine but I want sliding by key press

[shansubra]

@prashantkapate, I tested in desktop (chrome & firefox), iphone, android and it works completely fine. Btw, what do you mean by the results are inconsistent? Can you please tell us exactly?

[mhosman]

Is not working as expected on mobile devices. Sometimes the scroll works ok, sometimes you try to scroll and carousel go back to the previous item (using Chrome in Android). Is like is trying to snap (on mobile devices must be a free and smooth scroll, not by item/s).

[shansubra]

@mhosman, I see what you are saying... The scroll is nice and smooth in iphone but its little itchy in android. I just tried changing the velocity to be greater than 0 instead of 1 and it seems somewhat ok now. Just try that and see how it works for you.

hammertime.on('panend', function (ev) { if (Math.abs(ev.velocity) > 0) {

[mhosman]

Yes, now is working @shansubra (it is not getting stuck). Great job! Anyway it could be great to scroll smoothly on mobile devices, not by one element (the availability to set "slide" in 0).

[shansubra]

@mhosman, what do you mean by "the availability to set "slide" in 0"? I tweaked my code to see 1 item vertically and 2 items horizontally (while rotating the phone) and it slides fine for me.

[IITAdvisors]

@shansubra It works fine, but it is true that in Android is quite strange. As you said before, it seems to be something related to the velocity. Fastest I swipe, better it works. any advice or piece of code to improve it ?

Thanks!

[shansubra]

@IITAdvisors Did you try changing the velocity check from 1 to 0? Please see below:

From:

hammertime.on('panend', function (ev) {
if (Math.abs(ev.velocity) > 1 

To:

hammertime.on('panend', function (ev) {
if (Math.abs(ev.velocity) > 0) {

[sheikalthaf]

@IITAdvisors @shansubra @mhosman Hi,

I already set an option to allow swipe on velocity 0. But I'm struck on Bundling the package. Will you please help me to sort it. Install the beta 4 version and ng serve --aot first time it works and try change any data and save then it throws an error

For reference try this stackblitz

[shansubra]

@sheikalthaf - Sure. I will take a look at it.

[shansubra]

@sheikalthaf - I installed the beta package in my project but I couldn't simulate the error you have mentioned. Can you please tell me exactly how to bump into this error?

[sheikalthaf]

@shansubra Clone this repository and serve the app with ng serve --aot. Try to save any files randomly u will get this error

[shansubra]

@sheikalthaf tried many things but no luck.. Looks like the issue is related to angular-cli. But I will continue to look into this issue.

[IITAdvisors]

@shansubra Sorry I could not try before. I did the change you told me, now in Android swipes smooth. Seems perfect to me. I will try IOS.

[harshjulka]

@shansubra Thanks for the solution! Have you created a merge request for this solution? Because it will work! when we change code in the file you mentioned. However on server node_modules will get installed automatically and we have to change the code always.

[shansubra]

@IITAdvisors, @harshjulka - Good to know the fix is working for you guys.

@harshjulka - No, I haven't created a merge request for this solution yet.

[sheikalthaf]

@shansubra @harshjulka @IITAdvisors @olshansky Hi,

Published a build with angular 6 upgrade. Check this stackblitz link to know the usage.

Please set velocity to 0 in config. Then try touch.

Thanks

[shansubra]

Thanks @sheikalthaf for all your efforts. Will try the new version and let you know how it goes.

[shansubra]

@sheikalthaf - I tried in IOS and it works completely fine. Thanks again.

[sheikalthaf]

@IITAdvisors @shansubra @mhosman Please check the latest version of the build. and also release. Thanks