Как автоматически увеличить слайдер изображения в угловых

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});
        }
  });
}

Ввыше слайдер изображений Я использую 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

Самый простой способ - просто добавить его в конфиг.Гладкая карусель уже поддерживает автоматическое воспроизведение изображений.См. Официальную документацию .Это оригинальная документация для библиотеки slick, которая упакована в ngx-slick для использования в Angular.Так что все, что вам нужно сделать, это изменить slideConfig, чтобы включить автозапуск, например:

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

Answer 2

Если вы хотите автоматически циклически повторять изображения, вы можете, например, использовать Наблюдаемый таймер , который испускает числа в указанный интервал времени.

Сначала добавьте имя для скользкого компонента вшаблон, чтобы вы могли получить его также в коде.Затем шаблон выглядит следующим образом:

<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 в компоненте заголовка и вызвать метод 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, потому что до того, как компонент недоступен.Первый параметр таймера указывает, через сколько времени он запускается, а второй - интервал для каждого следующего сгенерированного числа.Поскольку наблюдаемый таймер генерирует увеличивающиеся числа все время, я использую оператор Modulus (Division Remainder), чтобы получить только числа, которые являются действительными индексами.

Чтобы правильно освободить и остановить таймер, вызов unsubscribe в ngOnDestroyнеобходимо, чтобы он не продолжал работать после уничтожения компонента.Вы можете прочитать больше о правильной утилизации Observables в документации по rxjs .