I have the following HTML code:

<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>

This is how it looks like on mobile:

I would like to create an animation that scrolls horizontally automatically to the last manufacturer, but stops when a user interacts with it.

In other words:

1. User opens page, sees automatic scroll
2. User understands that this is a scrolling div, begins to scroll with his finger.
3. Auto-Scrolling is now disabled on the page (until the user resets the state of the page)

Where I am having trouble:

1. How do I automatically scroll with javascript? (ideally I would like to control how much pixels to scroll in a time frame, 50px/sec for example)
2. How do I detect when a user interacts with "card-deck" div (like gestures: touch, slide, etc.)