如何在Angular中自动增加图像滑块

Question

我正在尝试自动更改来自 Array imgslider[] 的应用程序中的图像，

我把我的组件文件放在下面

import { Component, OnInit, Input } from '@angular/core';
import {HeadService} from '../service/head.service';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.css']
})
export class HeaderComponent implements OnInit {
head_slider: any = [];
imgslider: any = [];

  constructor( public _HeadService: HeadService ) {  }

  slides  = [  ];

slideConfig  = {'slidesToShow': 3, 'slidesToScroll': 4};

  ngOnInit() {

  this._HeadService.getDataa().subscribe(data => {
    this.head_slider = data['articles'];
   console.log(this.head_slider);
        for (let i = 0; i < data['articles'].length; i++) {

            this.slides.push({img: data['articles'][i].urlToImage});
        }
  });
}

在上面的图像滑块中，我使用的是 ngx-slick 图像滑块插件，这里的幻灯片在按钮单击时发生变化，我想自动增加滑块图像。

我把html文件放在下面

<ngx-slick class="carousel" #slickModal="slick-modal" [config]="slideConfig" (afterChange)="afterChange($event)">
        <div ngxSlickItem *ngFor="let slide of slides" class="slide">
              <img src="{{ slide.img }}" alt="" width="100%">
        </div>
    </ngx-slick>

    <button (click)="addSlide()">Add</button>
    <button (click)="removeSlide()">Remove</button>
    <button (click)="slickModal.slickGoTo(2)">slickGoto 2</button>
    <button (click)="slickModal.unslick()">unslick</button>

Answer 1

如果您想自动循环图像，例如可以使用timer Observable，它会在指定的时间间隔内发出数字。

首先在模板中为 slick 组件添加一个名称，这样您也可以在代码中获取它。然后模板如下所示：

<ngx-slick #slickComponent class="carousel" #slickModal="slick-modal" [config]="slideConfig" (afterChange)="afterChange($event)">
    <div ngxSlickItem *ngFor="let slide of slides" class="slide">
          <img src="{{ slide.img }}" alt="" width="100%">
    </div>
</ngx-slick>

然后，您可以在标题组件中将组件作为ViewChild 获取，并在订阅计时器 observable 时调用组件的slickGoTo 方法。这是添加此逻辑后标题组件的示例。

import { Component, OnInit, Input, AfterViewInit, OnDestroy } from '@angular/core';
import { timer, Subscription } from 'rxjs';
import {HeadService} from '../service/head.service';
import { SlickComponent } from 'ngx-slick';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.css']
})
export class HeaderComponent implements OnInit, OnDestroy, AfterViewInit {
head_slider: any = [];
imgslider: any = [];
@ViewChild('slickComponent') slickComponent: SlickComponent;
private timerSubscription: Subscription;

  constructor( public _HeadService: HeadService ) {  }

  slides  = [  ];

slideConfig  = {'slidesToShow': 3, 'slidesToScroll': 4};

  ngOnInit() {

  this._HeadService.getDataa().subscribe(data => {
    this.head_slider = data['articles'];
   console.log(this.head_slider);
        for (let i = 0; i < data['articles'].length; i++) {

            this.slides.push({img: data['articles'][i].urlToImage});
        }
  });

  public ngAfterViewInit() : void {
    this.timerSubscription = timer(1000, 1000).subscribe((nextNumber) => {
      this.slickComponent.slickGoTo(nextNumber % this.slides.length);
    });
  }

  public ngOnDestroy(): void {
    this.timerSubscription.unsubscribe();
  }
}

计时器必须在ngAfterViewInit 方法中启动，因为在此之前组件不可用。第一个计时器参数指定在多长时间后开始，第二个参数指定每个生成的下一个数字的间隔。因为计时器 observable 一直在生成递增的数字，所以我使用 Modulus（除法余数）运算符仅获取有效索引的数字。

要正确释放和停止计时器，需要在ngOnDestroy 中调用unsubscribe，以便在组件被销毁后它不会继续运行。您可以在documentation of rxjs 中阅读有关正确处理 Observable 的更多信息。

Answer 2

最简单的方法实际上是在配置中添加它。光滑的轮播已经支持图像的自动播放。见官方documentation。这是 ngx-slick 包装的 slick 库的原始文档，用于 Angular。因此，您需要做的就是将 slideConfig 更改为包含 autoPlay，如下所示：

slideConfig = {"slidesToShow": 4, "slidesToScroll": 4, autoplay: true,
  autoplaySpeed: 2000};