Angular 6中的图像轮播

Question

我需要一个图像轮播我的应用程序(Angular v6),而冲浪我发现这个解决方案我,使用ngx-drag-scroll.有没有其他方法可以像这样做图像轮播？

不使用jquery/javascript,只使用Typescript - 我能实现吗？

任何帮助全部资源.我想要一个旋转木马在其中显示卡组件.

Answer 1

还有其他方法可以像这样制作图像轮播吗？

是

不使用jquery / javascript，仅使用Typescript-我可以实现吗？

是的（TypeScript是JavaScript的超集，您仍然需要与DOM交互，但是）

这是一个简单实现的StackBlitz演示，看起来像在满足您的要求。（例如，您可以将其传递给MaterialCard组件）。

基本上是这样的：您给SliderComponentDOM Elements（SliderItemDirectives），当您单击右键时，它将把当前最左边的Element的宽度添加到滑块容器的滚动位置。单击左会减去宽度。我已经利用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++
    }
  }
}