diff --git a/README.md b/README.md
index 806d58c..aeb9f1d 100644
--- a/README.md
+++ b/README.md
@@ -71,6 +71,7 @@ To use lazy loading, pass the carousel an array of images, as shown in the examp
 | autoplayInterval | number | 5000 | The interval between scrolling the carousel. Used together with autoplay. |
 | pauseOnHover | boolean | true | Stops autoplay if the cursor is over the carousel area. |
 | dots | boolean | false | Carousel progress bar. |
+| dotsPerPage | boolean | false | If cellsToShow and cellsToScroll are larger than 1, if dotsPerPage is true it will only show 1 dot per page of cells. So with 9 images and cellsToShow and Scrollset ot 3 it will show only 3 dots |
 | margin | number | 10 | Cell spacing. |
 | minSwipeDistance | number | 10 | Minimum distance for swipe. |
 | transitionDuration | number | 300 | Animation duration. |
diff --git a/projects/angular-responsive-carousel/src/lib/carousel.component.ts b/projects/angular-responsive-carousel/src/lib/carousel.component.ts
index af84b83..f00a9d6 100644
--- a/projects/angular-responsive-carousel/src/lib/carousel.component.ts
+++ b/projects/angular-responsive-carousel/src/lib/carousel.component.ts
@@ -94,6 +94,9 @@ export class CarouselComponent implements OnDestroy {
     }
 
     get activeDotIndex() {
+        if (this.dotsPerPage) {
+           return Math.ceil(this.slideCounter / this.cellsToScroll) % this.dotsArr.length;
+        }
         return this.slideCounter % this.cellLength;
     }
 
@@ -116,6 +119,7 @@ export class CarouselComponent implements OnDestroy {
     @Input() autoplayInterval: number = 5000;
     @Input() pauseOnHover: boolean = true;
     @Input() dots: boolean = false;
+    @Input() dotsPerPage: boolean = false;
     @Input() borderRadius!: number;
     @Input() margin: number = 10;
     @Input() objectFit: 'contain' | 'cover' | 'none' = 'cover';
@@ -237,7 +241,7 @@ export class CarouselComponent implements OnDestroy {
     ngAfterViewInit() {
         this.initCarousel();
         this.cellLength = this.getCellLength();
-        this.dotsArr = Array(this.cellLength).fill(1);
+        this.dotsArr = this.dotsPerPage ? Array(Math.ceil(this.cellLength/this.cellsToScroll)).fill(1): Array(this.cellLength).fill(1);
         this.ref.detectChanges();
         this.carousel.lineUpCells();
         this.savedCarouselWidth = this.carouselWidth;
diff --git a/src/app/app.component.html b/src/app/app.component.html
index cac58a0..7ef3d11 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -156,6 +156,19 @@ <h3>dots = true</h3>
 			</carousel>
 		</div>
 
+		<!-- cellsToShow, cellsToScroll, dotsPerPage -->
+		<div class="demo">
+			<h3>cellsToShow = 3, cellsToScroll = 3, dotsPerPage = true</h3>
+			<carousel
+				[images]="images"
+				[height]="150"
+				[cellsToShow]="3"
+				[cellsToScroll]="3"
+            [dots]="true"
+            [dotsPerPage]="true">
+			</carousel>
+		</div>
+      
 		<!-- objectFit -->
 		<div class="demo">
 			<h3>objectFit = contain</h3>