angular - Angular 6 中的图像轮播

Question

我的应用程序需要一个图像轮播（Angular v6）。在冲浪时，我发现了这个使用 using的解决方案ngx-drag-scroll。有没有其他方法可以像这个轮播一样做图像轮播并在里面显示卡片组件？

可以不使用jQuery而只使用Typescript来实现吗？

标签： angulartypescriptangular6carousel

Answer 1

有没有其他方法可以像这样进行图像轮播？

是的

不使用 jquery/javascript，只使用 Typescript - 我能做到这一点吗？

是的（好吧，TypeScript 是一组超级 JavaScript，你仍然需要与 DOM 交互，但是是的）

---

这是一个简单实现的 StackBlitz 演示，它的行为、外观和感觉都符合您的要求。（例如，您可以将其传递给 MaterialCard组件）。

它基本上是这样工作的：你给SliderComponentDOM 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++
    }
  }
}