Карусель изображений в Angular 6

Есть много решений, которые сделают то, что вам нужно, вот самое простое:

Структурируйте свой компонент примерно так:

<component>
  <div class = "wrapper">
    <card>
    <card>
    <card>
    ...
    <card>
  </div class = "wrapper">
</component>

Используйте CSS, чтобы скрыть переполнение по оси x компонента, а затем программно добавьте и вычтите левое поле оболочки при нажатии кнопок.

Вы можете использовать @ViewChild, чтобы удерживать оболочку в вашем классе компонента, чтобы вы могли манипулировать его значениями CSS

Is there any other way to do the image carousel like this ?

да

Without using jquery/javascript,using only Typescript - can I achieve this?

Да (ну, TypeScript - это супер-набор JavaScript, и вам все еще нужно взаимодействовать с DOM, но да)

Вот демонстрация StackBlitz простой реализации, которая, кажется, ведет себя, выглядит и ощущается как ваши требования. (Например, вы можете передать его Material Card components).

В основном это работает так: вы передаете элементы DOM SliderComponent (SliderItemDirectives), и они добавят текущую ширину самого левого элемента к положению прокрутки контейнера ползунка, когда вы щелкаете вправо. Щелчок левой кнопкой мыши вычитает ширину. Я использовал ContentChildren и ViewChild, чтобы добраться до ширины и свойства scrollLeft. Анимация достигается с помощью css scroll-behavior: smooth;.

Вот основной компонент:

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.info('items', this.items);
  }

  ngAfterViewInit() {
    console.info('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++
    }
  }
}