diff --git a/projects/ks89/angular-modal-gallery/src/lib/components/carousel/carousel.component.ts b/projects/ks89/angular-modal-gallery/src/lib/components/carousel/carousel.component.ts index 3fb1c679..6e5d557d 100644 --- a/projects/ks89/angular-modal-gallery/src/lib/components/carousel/carousel.component.ts +++ b/projects/ks89/angular-modal-gallery/src/lib/components/carousel/carousel.component.ts @@ -78,11 +78,7 @@ export class CarouselComponent extends AccessibleComponent implements OnInit, Af */ @Input() dotsConfig: DotsConfig = { visible: true }; - /** - * Object of type `InternalLibImage` that represent the visible image. - */ - @Input() - currentImage: InternalLibImage; + /** * Array of `InternalLibImage` that represent the model of this library with all images, * thumbs and so on. @@ -94,7 +90,7 @@ export class CarouselComponent extends AccessibleComponent implements OnInit, Af autoPlay = false; @Input() - intervalTime = 5000; + interval = 5000; @Input() isShowArrows = true; @@ -125,9 +121,7 @@ export class CarouselComponent extends AccessibleComponent implements OnInit, Af @Input() accessibilityConfig: AccessibilityConfig; - private _start$ = new Subject(); - private _stop$ = new Subject(); - + currentImage: InternalLibImage; /** * Object of type `CurrentImageConfig` exposed to the template. This field is initialized * applying transformations, default values and so on to the input of the same type. @@ -150,7 +144,8 @@ export class CarouselComponent extends AccessibleComponent implements OnInit, Af */ configDots: DotsConfig; - private interval; + private _start$ = new Subject(); + private _stop$ = new Subject(); /** * Private object without type to define all swipe actions used by hammerjs. @@ -167,6 +162,8 @@ export class CarouselComponent extends AccessibleComponent implements OnInit, Af } ngOnInit() { + this.currentImage = this.images[0]; + const defaultLoading: LoadingConfig = { enable: true, type: LoadingType.STANDARD }; const defaultDescriptionStyle: DescriptionStyle = { bgColor: 'rgba(0, 0, 0, .5)', @@ -250,9 +247,9 @@ export class CarouselComponent extends AccessibleComponent implements OnInit, Af console.log('ngAfterContentInit 2'); this._start$ .pipe( - map(() => this.intervalTime), - filter(intervalTime => intervalTime > 0), - switchMap(intervalTime => timer(intervalTime).pipe(takeUntil(this._stop$))) + map(() => this.interval), + filter(interval => interval > 0), + switchMap(interval => timer(interval).pipe(takeUntil(this._stop$))) ) .subscribe(() => this._ngZone.run(() => { @@ -445,7 +442,7 @@ export class CarouselComponent extends AccessibleComponent implements OnInit, Af // // this.nextImage(); // // this.ref.markForCheck(); // // }); - // // }, this.intervalTime); + // // }, this.interval); // // }); // } } @@ -458,7 +455,7 @@ export class CarouselComponent extends AccessibleComponent implements OnInit, Af // this.currentImage = this.images[0]; // this.ref.markForCheck(); // }); - // }, this.intervalTime); + // }, this.interval); // }); // } // } diff --git a/projects/ks89/angular-modal-gallery/src/lib/components/carousel/carousel.html b/projects/ks89/angular-modal-gallery/src/lib/components/carousel/carousel.html index a52a07d6..59fc2a9f 100644 --- a/projects/ks89/angular-modal-gallery/src/lib/components/carousel/carousel.html +++ b/projects/ks89/angular-modal-gallery/src/lib/components/carousel/carousel.html @@ -1,6 +1,6 @@
- +
diff --git a/src/app/app.component.html b/src/app/app.component.html index 8e1a7751..50dd2947 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -20,13 +20,14 @@

X1 - carousel example.

Autoplay:

Show Arrows:


- + [slideConfig]="{infinite: false}" + [autoPlay]="autoPlay" + [interval]="3000">
This is my transcluded content!