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

Question

我正在尝试在我的应用程序中自动更改来自数组 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});
        }
  });
}

In the above Image slider I am using ngx-slick Image slider plugin , Here slides changes on button click , I want to auto Increment the slider Image.

我将 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>

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

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 生成的数字一直在增加，所以我使用模数（除法余数）运算符只获取作为有效索引的数字。

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

Answer 2

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

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

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

how to Auto Increment Image slider In Angular

javascript

typescript

angular-services

angular

angular5

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

我将 html 文件放在下面