working on commercials

src/app/app.component.scss

@@ -7,6 +7,7 @@
     "topmenu"
     "content"
     "reclame";
+  grid-template-rows: auto 1fr 200px;
 }
 
 app-reclamespinner {

src/app/reclamespinner/reclamespinner.component.html

@@ -1,3 +1,7 @@
-<div>
- KOOP MEER WORST
+<div id="reclamespinner">
+  <button id="goleftbutton" (click)="goLeft()">LEFT</button>
+  <div class="reclameitem" *ngFor="let image of images">
+    <img src="/assets/reclam/{{image}}"/>
+  </div>
+  <button id="gorightbutton" (click)="goRight()">RIGHT</button>
 </div>

src/app/reclamespinner/reclamespinner.component.scss

@@ -3,3 +3,25 @@ div {
   width: 100%;
   height: 100%;
 }
+
+#reclamespinner {
+  display: grid;
+  grid-template-rows: 1fr;
+  grid-auto-flow: column;
+  overflow: hidden;
+}
+.reclameitem {
+  height: 100%;
+}
+
+#goleftbutton, #gorightbutton {
+ position: absolute;
+}
+
+#goleftbutton {
+  left: 0px;
+}
+
+#gorightbutton {
+  right: 0px;
+}

src/app/reclamespinner/reclamespinner.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import {Component, OnInit} from '@angular/core';
 
 @Component({
   selector: 'app-reclamespinner',
@@ -7,9 +7,24 @@ import { Component, OnInit } from '@angular/core';
 })
 export class ReclamespinnerComponent implements OnInit {
 
-  constructor() { }
+  protected images: string[] = [];
+
+  constructor() {
+    this.images.push('Victoria.jpg');
+    this.images.push('basta.png');
+  }
 
   ngOnInit() {
   }
 
+  goRight() {
+    let s = this.images.pop();
+    this.images.splice(0, 0, s);
+  }
+
+  goLeft() {
+    const string = this.images[0];
+    this.images.splice(0, 1);
+    this.images.push(string);
+  }
 }