I am currently working on auto-changing images in my application that are sourced from an array called imgslider[].
Below is the component file for MY:
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 implementation, ngx-slick Image slider plugin is being used. The slides change upon button click, but I aim to have the slider images increment automatically.
Next, see the HTML file below:
<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>