Bildkarussell in Angular 6

Gibt es eine andere Möglichkeit, das Image-Karussell so zu machen?

Ja

Ohne jquery/javascript, nur mit TypeScript - kann ich das erreichen?

Ja (gut, TypeScript ist ein super Satz von JavaScript und Sie müssen immer noch mit dem DOM interagieren, aber ja)

Hier ist eine StackBlitz-Demo einer einfachen Implementierung, die sich anscheinend so verhält, wie Ihre Anforderungen aussehen und sich anfühlen. (Sie können beispielsweise Material Card components übergeben).

Es funktioniert im Wesentlichen wie folgt: Sie geben die SliderComponent DOM-Elemente (SliderItemDirectives) ein und fügen die aktuelle Breite des linken Elements zur Bildlaufposition des Schieberegler-Containers hinzu, wenn Sie mit der rechten Maustaste klicken. Durch Klicken auf links wird die Breite abgezogen. Ich habe ContentChildren und ViewChild verwendet, um zu den widths und scrollLeft-Eigenschaften zu gelangen. Die Animation wird mit dem css scroll-behavior: smooth; erreicht.

Hier ist die Hauptkomponente:

import { Component, AfterContentInit, ContentChildren, ViewChild, QueryList, ElementRef } from '@angular/core';
import { SliderItemDirective } from './slider-item.directive';

@Component({
  selector: 'app-slider',
  templateUrl: './slider.component.html',
  styleUrls: ['./slider.component.scss']
})
export class SliderComponent implements AfterContentInit {

  @ContentChildren(SliderItemDirective, { read: ElementRef }) items
    : QueryList<ElementRef<HTMLDivElement>>;
  @ViewChild('slides') slidesContainer: ElementRef<HTMLDivElement>;

  private slidesIndex = 0;

  get currentItem(): ElementRef<HTMLDivElement> {
    return this.items.find((item, index) => index === this.slidesIndex);
  }

  ngAfterContentInit() {
    console.log('items', this.items);
  }

  ngAfterViewInit() {
    console.log('slides', this.slidesContainer);
  }

  onClickLeft() {
    this.slidesContainer.nativeElement.scrollLeft -= this.currentItem.nativeElement.offsetWidth;

    if (this.slidesIndex > 0) {
      this.slidesIndex--;
    } 
  }

  onClickRight() {
    this.slidesContainer.nativeElement.scrollLeft += this.currentItem.nativeElement.offsetWidth;

    if (this.slidesIndex < this.items.length - 1) {
      this.slidesIndex++
    }
  }
}