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

Question

Мне нужна карусель изображений для моего приложения (Angular v6), во время серфинга я нашел это решение i, e используя ngx-drag-scroll.Есть ли другой способ сделать карусель изображений подобной этой?

Без использования jquery/javascript, с использованием только Typescript - могу ли я добиться этого?

Любая помощь полна ресурсов.Я хочу, чтобы карусель отображала компонент card внутри нее.

Answer 1

Есть ли другой способ сделать так, чтобы карусель изображений была такой?

Да

Без использования jquery / javascript, используя только Typescript - могу ли я достичь этого?

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

---

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

В основном это работает так: вы даете SliderComponent DOM Elements (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.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++
    }
  }
}

Answer 2

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

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

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

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

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