Tengo el siguiente código HTML:

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

Así es como se ve en el móvil:

Me gustaría crear una animación que se desplace horizontalmente automáticamente hasta el último fabricante, pero que se detenga cuando un usuario interactúa con ella.

En otras palabras:

1. El usuario abre la página, ve el desplazamiento automático
2. El usuario entiende que se trata de un div de desplazamiento, comienza a desplazarse con el dedo.
3. El desplazamiento automático ahora está deshabilitado en la página (hasta que el usuario restablece el estado de la página)

Donde estoy teniendo problemas:

1. ¿Cómo me desplazo automáticamente con javascript? (Idealmente, me gustaría controlar la cantidad de píxeles para desplazarse en un marco de tiempo, 50px/seg, por ejemplo)
2. ¿Cómo detecto cuando un usuario interactúa con el div "baraja de cartas" (como gestos: tocar, deslizar, etc.)