Below is the HTML code I am working with:
<div class="card-deck" fxLayout.xs="row" style="overflow: scroll; height:100%">
<md-card style="width:10rem" *ngFor="let make of filteredMakes" (click)="goToModels(make.niceName)"
class="page-card mat-card">
<img md-card-image="" src="assets/img/gallery/brands/256/{{make.name}}.png" class="mat-card-image" />
<md-card-subtitle class="mat-card-title text-center">{{ make.name }}</md-card-subtitle>
</md-card>
</div>
Here is how it appears on mobile devices:
https://i.sstatic.net/3t7Cs.png
I am interested in implementing an animation that automatically scrolls horizontally to the last manufacturer, but stops when a user interacts with it.
To break it down:
- User visits page and sees the automatic scroll
- User realizes it's a scrolling div and begins to manually scroll using their finger
- Auto-Scrolling is disabled at this point (until the user resets the page state)
My challenges are:
- How can I set up automatic scrolling using javascript? (preferably with control over the scroll speed, like 50px/sec)
- How do I detect user interactions with the "card-deck" div (such as touch gestures, sliding, etc.)