From 59d5bd2849e5dcc180e9f66c4eef74a078b0d5a0 Mon Sep 17 00:00:00 2001 From: IRooc Date: Tue, 15 Feb 2022 11:37:14 +0100 Subject: [PATCH 1/3] Add dotsPerPage option --- .../src/lib/carousel.component.ts | 6 +++++- src/app/app.component.html | 13 +++++++++++++ 2 files changed, 18 insertions(+), 1 deletion(-) diff --git a/projects/angular-responsive-carousel/src/lib/carousel.component.ts b/projects/angular-responsive-carousel/src/lib/carousel.component.ts index af84b83..415dcd9 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); + } 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 @@

dots = true

+ +
+

cellsToShow = 3, cellsToScroll = 3, dotsPerPage = true

+ + +
+

objectFit = contain

From 192d520b3b72684f3752d2970c814455559d151e Mon Sep 17 00:00:00 2001 From: IRooc Date: Wed, 16 Feb 2022 09:27:23 +0100 Subject: [PATCH 2/3] add loop option --- .../angular-responsive-carousel/src/lib/carousel.component.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/angular-responsive-carousel/src/lib/carousel.component.ts b/projects/angular-responsive-carousel/src/lib/carousel.component.ts index 415dcd9..f00a9d6 100644 --- a/projects/angular-responsive-carousel/src/lib/carousel.component.ts +++ b/projects/angular-responsive-carousel/src/lib/carousel.component.ts @@ -95,7 +95,7 @@ export class CarouselComponent implements OnDestroy { get activeDotIndex() { if (this.dotsPerPage) { - return Math.ceil(this.slideCounter / this.cellsToScroll); + return Math.ceil(this.slideCounter / this.cellsToScroll) % this.dotsArr.length; } return this.slideCounter % this.cellLength; } From e3a524d3e000bafa6412ae0bbc9a318a48b43302 Mon Sep 17 00:00:00 2001 From: IRooc Date: Wed, 16 Feb 2022 13:40:40 +0100 Subject: [PATCH 3/3] update readme --- README.md | 1 + 1 file changed, 1 insertion(+) 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. |