home auto slider

src/app/home/home.component.html

@@ -1,7 +1,9 @@
 <div class="component-home">
-  <div class="content">
+  <button class="goto-prev" (click)="scroll('prev')" (mouseover)="paused=true"><span class="icon icon-back"></span></button>
+  <button class="goto-next" (click)="scroll('next')" (mouseover)="paused=true"><span class="icon icon-back"></span></button>
+  <div class="content" #scrollContent>
     <div [ngClass]="'slide-' + item.width" *ngFor="let item of homeItems">
-      <div class="box" [ngClass]="'skew-' + (item.id % 6)" (click)="showDetails(item.id)">
+      <div class="box" [ngClass]="'skew-' + (item.id % 6)" (click)="showDetails(item.id)" (mouseover)="paused=true">
         <img class="image" *ngIf="item.loading" src="/assets/images/loader.webp" alt="loading">
         <img class="image" [hidden]="item.loading" (load)="onLoad(item.id)" [src]="basePath+item.image">
         <div class="text">

src/app/home/home.component.scss

@@ -6,10 +6,49 @@
   height: 100vh;
   transform: skew(-15deg) rotate(-15deg);
 
+  .goto-prev,
+  .goto-next {
+    position: absolute;
+    height: 40px;
+    width: 60px;
+    border: none;
+    background: none;
+    color: $black;
+    font-size: $font-40;
+    appearance: none;
+    margin: 0;
+    padding: 5px;
+    cursor: pointer;
+
+    .icon {
+      &:before {
+        transform: translate(-50%, -50%);
+        position: absolute;
+        top: 50%;
+        left: 50%;
+      }
+    }
+  }
+  .goto-prev {
+    top: 70px;
+    left: 50px;
+  }
+  .goto-next {
+    bottom: -30px;
+    right: 50px;
+    .icon {
+      &:before {
+        transform: translate(-50%, -50%) rotate(180deg);
+      }
+    }
+  }
+
   .content {
     display: inline-flex;
     margin: auto;
-    animation: slide 200s ease-in-out infinite;
+    margin-left: -50px;
+    //animation: slide 150s linear infinite;
+    transition: margin-left .5s;
 
     @each $width in 1,2,3,4,5,6 {
       .slide-#{$width} {
@@ -116,7 +155,9 @@
       }
     }
 
-    &:hover {
+    &:hover,
+    &.paused {
+      //animation: none;
       animation-play-state: paused;
     }
   }
@@ -124,7 +165,7 @@
 
 
 @keyframes slide {
-  0% {transform: translateX(-100%) translateX(100vw);}
-  50% {transform: translateX(0%) translateX(-100vw);}
-  100% {transform: translateX(-100%) translateX(100vw);}
+  0% {margin-left: 0;}
+  50% {margin-left: -100%;}
+  100% {margin-left: 0;}
 }

src/app/home/home.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core'
+import { Component, OnInit, ViewChild, ElementRef, Renderer2 } from '@angular/core'
 import { Router, NavigationEnd } from '@angular/router'
 import { ApisService } from '../services/apis.service'
 import { environment } from '../../environments/environment'
@@ -10,17 +10,23 @@ import { environment } from '../../environments/environment'
 })
 export class HomeComponent implements OnInit {
 
+  @ViewChild('scrollContent') scrollContent: ElementRef
+
   public basePath = `${environment.BASE_PATH}`
 
   public homeItems: any = []
   public section: string = 'portfolio'
+  public paused: boolean = false
+  private scrollPos: number = 0
 
   constructor(
     private apisService: ApisService,
-    private router: Router)
-  { }
+    private router: Router,
+    private renderer: Renderer2
+  ) { }
 
   ngOnInit(): void {
+
     this.apisService.getPortfolio(this.section, true).toPromise().then((response) => {
       this.homeItems = response.items
 
@@ -41,6 +47,27 @@ export class HomeComponent implements OnInit {
     })
   }
 
+  ngAfterViewInit() {
+    setInterval( () => {
+      if(!this.paused) {
+        const scrollWidth = 300
+        const scrollPos = parseInt(this.scrollContent.nativeElement.style.marginLeft) || 0
+        /*
+        switch(dir) {
+          case 'prev':
+            this.scrollPos = scrollPos + scrollWidth >= 0 ? 0 : scrollPos + scrollWidth
+            break;
+          case 'next':*/
+            this.scrollPos = scrollPos - scrollWidth <= -(this.scrollContent.nativeElement.offsetWidth - document.body.clientWidth) ?
+                              -(this.scrollContent.nativeElement.offsetWidth - document.body.clientWidth) : scrollPos - scrollWidth
+        /*
+            break;
+        }*/
+        this.scrollContent.nativeElement.style.marginLeft = this.scrollPos + 'px'
+      }
+    },2000)
+  }
+
   showDetails(id): void {
     const section = this.section == 'exhibitions' ? 'exhibitions' : 'works'
     this.router.navigate([`/detail/${section}/${id}`])
@@ -50,4 +77,25 @@ export class HomeComponent implements OnInit {
     this.homeItems.filter(item => item.id == id)[0].loading = false
   }
 
+  scroll(dir): void {
+    const scrollWidth = document.body.clientWidth / 3
+    const scrollPos = parseInt(this.scrollContent.nativeElement.style.marginLeft) || 0
+    this.paused = true
+
+    switch(dir) {
+      case 'prev':
+        this.scrollPos = scrollPos + scrollWidth >= 0 ? 0 : scrollPos + scrollWidth
+        break;
+      case 'next':
+        this.scrollPos = scrollPos - scrollWidth <= -(this.scrollContent.nativeElement.offsetWidth - document.body.clientWidth) ?
+                          -(this.scrollContent.nativeElement.offsetWidth - document.body.clientWidth) : scrollPos - scrollWidth
+        break;
+    }
+    this.scrollContent.nativeElement.style.marginLeft = this.scrollPos + 'px'
+
+    setTimeout ( () => {
+      this.paused = false
+    }, 2000)
+  }
+
 }