From 704964c0c4f32aca6b5a4b88faa8d470edf3ba99 Mon Sep 17 00:00:00 2001
From: renamoo <renamoo808@gmail.com>
Date: Fri, 19 Jun 2020 15:45:30 +0900
Subject: [PATCH 1/3] #8 add slideCounterChange event

---
 src/app/app.component.html             |  8 ++++----
 src/app/app.component.ts               |  8 ++++++--
 src/app/carousel/carousel.component.ts | 10 ++++++++--
 src/app/carousel/carousel.ts           |  4 ++++
 4 files changed, 22 insertions(+), 8 deletions(-)

diff --git a/src/app/app.component.html b/src/app/app.component.html
index bdd9cc0..10309b7 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,7 +1,7 @@
 <div class="container">
-	<carousel
-		[images]="images">
+	<carousel [images]="images" (slideCounterChange)="onImgChange($event)">
 	</carousel>
 </div>
-
-<router-outlet></router-outlet>
\ No newline at end of file
+  
+<router-outlet></router-outlet>
+  
\ No newline at end of file
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 18973a5..d1a3a91 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -53,8 +53,8 @@ export class AppComponent {
 
     ngAfterViewInit() {
         this.myCarousel = this.carouselComponent.find(elem => elem.id === "my-carousel");
-    }
-
+	}
+	
     requestFullscreen() {
     	document.documentElement.requestFullscreen();
     }
@@ -92,4 +92,8 @@ export class AppComponent {
 	select(index) {
 		this.myCarousel.select(index);
 	}
+
+	onImgChange(index: number) {
+		console.log(index);
+	}
 }
diff --git a/src/app/carousel/carousel.component.ts b/src/app/carousel/carousel.component.ts
index d5d60f1..33cfa76 100644
--- a/src/app/carousel/carousel.component.ts
+++ b/src/app/carousel/carousel.component.ts
@@ -3,6 +3,7 @@ import {ChangeDetectorRef, Component, ElementRef, EventEmitter, HostBinding, Hos
 import {Images} from './interfaces';
 import {Touches} from './touches';
 import {Carousel} from './carousel';
+import { Subject } from 'rxjs';
 
 
 @Component({
@@ -25,6 +26,7 @@ export class CarouselComponent implements OnDestroy {
     _width: number;
     _cellWidth: number | '100%' = 200;
     isMoving: boolean;
+    slideCounterChange$: Subject<number> = new Subject();
 
     get isLandscape(){
         return window.innerWidth > window.innerHeight;
@@ -54,7 +56,7 @@ export class CarouselComponent implements OnDestroy {
     }
 
     @Output() events: EventEmitter<any> = new EventEmitter<any>();
-
+    @Output() slideCounterChange: EventEmitter<number> = new EventEmitter<number>();
     @Input() height: number = 200;
     @Input() width: number;
     @Input() borderRadius: number;
@@ -126,6 +128,8 @@ export class CarouselComponent implements OnDestroy {
 
         this.initCarousel();
         this.setDimensions();
+
+        this.slideCounterChange$.subscribe(index => this.slideCounterChange.emit(index));
     }
 
     ngAfterViewInit() {
@@ -142,6 +146,7 @@ export class CarouselComponent implements OnDestroy {
 
     ngOnDestroy() {
         this.touches.destroy();
+        this.slideCounterChange$.complete();
     }
 
     initCarousel() {
@@ -156,7 +161,8 @@ export class CarouselComponent implements OnDestroy {
             minSwipeDistance: this.minSwipeDistance,
             transitionDuration: this.transitionDuration,
             transitionTimingFunction: this.transitionTimingFunction,
-            videoProperties: this.videoProperties
+            videoProperties: this.videoProperties,
+            slideCounterChange$: this.slideCounterChange$
         });
     }
 
diff --git a/src/app/carousel/carousel.ts b/src/app/carousel/carousel.ts
index 0dc6708..2d150e1 100644
--- a/src/app/carousel/carousel.ts
+++ b/src/app/carousel/carousel.ts
@@ -1,3 +1,5 @@
+import { Subject } from 'rxjs';
+
 export interface Properties {
     element: HTMLElement;
     container: HTMLElement;
@@ -10,6 +12,7 @@ export interface Properties {
     transitionDuration: number;
     transitionTimingFunction: 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'linear';
     videoProperties: any;
+    slideCounterChange$: Subject<number>
 }
 
 export class Carousel {
@@ -444,6 +447,7 @@ export class Carousel {
 
         this.direction = undefined;
         this.slideLength = 0;
+        this.properties.slideCounterChange$.next(this.slideCounter);
     }
 
     resetTransition() {

From 791feecd2677ec606faf18781a84f7b0563330ba Mon Sep 17 00:00:00 2001
From: renamoo <renamoo808@gmail.com>
Date: Fri, 19 Jun 2020 15:52:11 +0900
Subject: [PATCH 2/3] #8 fix unintended change

---
 src/app/app.component.html | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/app/app.component.html b/src/app/app.component.html
index 10309b7..b75121c 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -3,5 +3,4 @@
 	</carousel>
 </div>
   
-<router-outlet></router-outlet>
-  
\ No newline at end of file
+<router-outlet></router-outlet>
\ No newline at end of file

From 979b707cd4a598be19b1ba4d3927fad90a38b90d Mon Sep 17 00:00:00 2001
From: renamoo <41532275+renamoo@users.noreply.github.com>
Date: Fri, 19 Jun 2020 15:53:26 +0900
Subject: [PATCH 3/3] #8 fix typo

---
 src/app/carousel/carousel.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/app/carousel/carousel.ts b/src/app/carousel/carousel.ts
index 2d150e1..7c045fa 100644
--- a/src/app/carousel/carousel.ts
+++ b/src/app/carousel/carousel.ts
@@ -12,7 +12,7 @@ export interface Properties {
     transitionDuration: number;
     transitionTimingFunction: 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'linear';
     videoProperties: any;
-    slideCounterChange$: Subject<number>
+    slideCounterChange$: Subject<number>;
 }
 
 export class Carousel {
@@ -534,4 +534,4 @@ export class Carousel {
     getCenterPositionIndex() {
         return (this.totalContainerCellsCount - 1) / 2;
     }
-}
\ No newline at end of file
+}