69 lines
2.4 KiB
TypeScript
69 lines
2.4 KiB
TypeScript
import {AfterViewInit, Component, OnDestroy} from '@angular/core';
|
|
|
|
@Component({
|
|
selector: 'app-carousel',
|
|
templateUrl: './carousel.component.html',
|
|
styleUrls: ['./carousel.component.scss']
|
|
})
|
|
export class CarouselComponent implements OnDestroy, AfterViewInit {
|
|
private timer?: any;
|
|
|
|
background = true;
|
|
gallery: string[] = [
|
|
'/assets/gallery/0e2343c77df8a7a889ac415c8e7a7e21.jpg',
|
|
'/assets/gallery/2a291f871aa431321815427bd0da7b47.jpg',
|
|
'/assets/gallery/3daf84c720d7cc1a1cee552ed8aaa950.png',
|
|
'/assets/gallery/005aaf842df485a2aa84cdf1126b3b99.jpg',
|
|
'/assets/gallery/29b2858c929dad50084105625c1fdb42.jpg',
|
|
'/assets/gallery/47ac8b23a14218a2d34c1e18aae21294.png',
|
|
'/assets/gallery/53be6420ddf84d8b03a23150f019244b.jpg',
|
|
'/assets/gallery/64d63ff7fabb405e8dfc828a99ac5624.jpg',
|
|
'/assets/gallery/65cd4315aa7657a49801b9295cdae2c3.jpg',
|
|
'/assets/gallery/94ded0778bb59e7e0bf88f6dc888ef4c.jpg',
|
|
'/assets/gallery/845ee7532bd7d36722961fb323bfa1dd.jpg',
|
|
'/assets/gallery/976d7cb341f7cec8744b622564a47f39.jpg',
|
|
'/assets/gallery/1661a1bb4e41da05e0ed5a6a5392e65a.jpg',
|
|
'/assets/gallery/419966f0afc5e2304e7d0356cd9ebcd0.jpg',
|
|
'/assets/gallery/509028fb06297b1265e4fe411db6aa02.jpg',
|
|
'/assets/gallery/a9c0fd0475a0668048c650847d01d89a.jpg',
|
|
'/assets/gallery/ac030ea1880bad81fb310963f260879c.jpg',
|
|
'/assets/gallery/ac719df5a9c457b7681f03563135867d.jpg',
|
|
'/assets/gallery/b0fb7922a80370e24cc556278937f368.jpg',
|
|
'/assets/gallery/b07494f26cafee254851a171cdfcea39.jpg',
|
|
'/assets/gallery/bf0f928b4c1e91c0c6c06ea8e61412cf.jpg',
|
|
'/assets/gallery/de3817da3a00e0706a73e6385a9aa361.jpg',
|
|
'/assets/gallery/dfa230c49c1c737ffdaf46875431212c.jpg',
|
|
'/assets/gallery/e2d1fd95e5a6c36a83b7fc602419b8c6.jpg',
|
|
'/assets/gallery/e312d84b034d5fd307a5e4b48ac7fead.jpg',
|
|
'/assets/gallery/f851220bb22cf91b4041695d930c3af0.jpg',
|
|
];
|
|
speed = 5000;
|
|
pause = false;
|
|
index = 0 ?? ~~(Math.random() * this.gallery.length);
|
|
height = '300px';
|
|
|
|
ngAfterViewInit() {
|
|
this.timer = setInterval(() => {
|
|
if(!this.pause) this.next(false);
|
|
}, this.speed);
|
|
}
|
|
|
|
ngOnDestroy() {
|
|
if(this.timer) {
|
|
clearInterval(this.timer);
|
|
this.timer = null;
|
|
}
|
|
}
|
|
|
|
next(pause = true) {
|
|
this.pause = pause;
|
|
this.index++;
|
|
if(this.index >= this.gallery.length) this.index = 0;
|
|
}
|
|
|
|
previous(pause = true) {
|
|
this.pause = pause;
|
|
this.index = this.index > 0 ? this.index - 1 : this.gallery.length - 1;
|
|
}
|
|
}
|