diff --git a/src/app/app.component.scss b/src/app/app.component.scss index 5127cfd..22c6daf 100644 --- a/src/app/app.component.scss +++ b/src/app/app.component.scss @@ -7,6 +7,7 @@ "topmenu" "content" "reclame"; + grid-template-rows: auto 1fr 200px; } app-reclamespinner { diff --git a/src/app/reclamespinner/reclamespinner.component.html b/src/app/reclamespinner/reclamespinner.component.html index bfe9e57..ef0dbe4 100644 --- a/src/app/reclamespinner/reclamespinner.component.html +++ b/src/app/reclamespinner/reclamespinner.component.html @@ -1,3 +1,7 @@ -
- KOOP MEER WORST +
+ +
+ +
+
diff --git a/src/app/reclamespinner/reclamespinner.component.scss b/src/app/reclamespinner/reclamespinner.component.scss index 33f6c85..a35dbd6 100644 --- a/src/app/reclamespinner/reclamespinner.component.scss +++ b/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; +} diff --git a/src/app/reclamespinner/reclamespinner.component.ts b/src/app/reclamespinner/reclamespinner.component.ts index 13fcc0b..f0266f8 100644 --- a/src/app/reclamespinner/reclamespinner.component.ts +++ b/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); + } }