feat(carousel): indicators for group of slides (#5234)

Fix: #5233 with indicatorsByChunk input the carousel indicators indicate slides chunks - works ONLY if singleSlideOffset = FALSE

Author: gioboa

demo/src/app/components/+carousel/carousel-section.list.ts

@@ -11,6 +11,7 @@ import { DemoCarouselSlideChangedEventComponent } from './demos/slide-changed-ev
 import { DemoCarouselMultilistComponent } from './demos/multilist/multilist';
 import { DemoCarouselMultilistSingleOffsetComponent } from './demos/multilist-single-offset/multilist-single-offset';
 import { DemoCarouselMultilistFromIndexComponent } from './demos/multilist-from-index/multilist-from-index';
+import { DemoCarouselMultilistIndicatorsByChunkComponent } from './demos/multilist-indicators-by-chunk/multilist-indicators-by-chunk';
 import { DemoAccessibilityComponent } from './demos/accessibility/accessibility';
 
 import { ContentSection } from '../../docs/models/content-section.model';
@@ -129,6 +130,13 @@ export const demoComponentContent: ContentSection[] = [
         html: require('!!raw-loader!./demos/multilist-from-index/multilist-from-index.html'),
         outlet: DemoCarouselMultilistFromIndexComponent
       },
+      {
+        title: 'Multilist Indicators By Chunk',
+        anchor: 'multilist-indicators-by-chunk',
+        component: require('!!raw-loader?lang=typescript!./demos/multilist-indicators-by-chunk/multilist-indicators-by-chunk.ts'),
+        html: require('!!raw-loader?lang=markup!./demos/multilist-indicators-by-chunk/multilist-indicators-by-chunk.html'),
+        outlet: DemoCarouselMultilistIndicatorsByChunkComponent
+      },
       {
         title: 'Accessibility',
         anchor: 'accessibility',

demo/src/app/components/+carousel/demos/index.ts

@@ -11,6 +11,7 @@ import { DemoCarouselSlideChangedEventComponent } from './slide-changed-event/sl
 import { DemoCarouselMultilistComponent } from './multilist/multilist';
 import { DemoCarouselMultilistSingleOffsetComponent } from './multilist-single-offset/multilist-single-offset';
 import { DemoCarouselMultilistFromIndexComponent } from './multilist-from-index/multilist-from-index';
+import { DemoCarouselMultilistIndicatorsByChunkComponent } from './multilist-indicators-by-chunk/multilist-indicators-by-chunk';
 import { DemoAccessibilityComponent } from './accessibility/accessibility';
 
 export const DEMO_COMPONENTS = [
@@ -28,5 +29,6 @@ export const DEMO_COMPONENTS = [
   DemoCarouselMultilistComponent,
   DemoCarouselMultilistSingleOffsetComponent,
   DemoCarouselMultilistFromIndexComponent,
+  DemoCarouselMultilistIndicatorsByChunkComponent,
   DemoAccessibilityComponent
 ];

demo/src/app/components/+carousel/demos/multilist-indicators-by-chunk/multilist-indicators-by-chunk.html

@@ -0,0 +1,14 @@
+<p>
+  If `true` - carousel indicators indicate slides chunks works ONLY if singleSlideOffset = FALSE
+</p>
+<carousel [itemsPerSlide]="itemsPerSlide"
+          [singleSlideOffset]="false"
+          [interval]="false"
+          [indicatorsByChunk]="true">
+  <slide *ngFor="let slide of slides; let index=index">
+    <img [src]="slide.image" alt="image slide" style="display: block; width: 100%;">
+    <div class="carousel-caption">
+      <h4>Slide {{index}}</h4>
+    </div>
+  </slide>
+</carousel>

demo/src/app/components/+carousel/demos/multilist-indicators-by-chunk/multilist-indicators-by-chunk.ts

@@ -0,0 +1,22 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'demo-carousel-multilist-indicators-by-chunk',
+  templateUrl: './multilist-indicators-by-chunk.html'
+})
+export class DemoCarouselMultilistIndicatorsByChunkComponent {
+  itemsPerSlide = 3;
+
+  slides = [
+    {image: 'assets/images/nature/1.jpg'},
+    {image: 'assets/images/nature/2.jpg'},
+    {image: 'assets/images/nature/3.jpg'},
+    {image: 'assets/images/nature/4.jpg'},
+    {image: 'assets/images/nature/5.jpg'},
+    {image: 'assets/images/nature/6.jpg'},
+    {image: 'assets/images/nature/7.jpg'},
+    {image: 'assets/images/nature/8.jpg'},
+    {image: 'assets/images/nature/1.jpg'},
+    {image: 'assets/images/nature/2.jpg'}
+  ];
+}

src/carousel/carousel.component.html

@@ -1,6 +1,6 @@
 <div (mouseenter)="pause()" (mouseleave)="play()" (mouseup)="play()" class="carousel slide">
   <ol class="carousel-indicators" *ngIf="showIndicators && slides.length > 1">
-    <li *ngFor="let slidez of slides; let i = index;" [class.active]="slidez.active === true" (click)="selectSlide(i)"></li>
+    <li *ngFor="let slidez of indicatorsSlides(); let i = index;" [class.active]="slidez.active === true" (click)="selectSlide(i)"></li>
   </ol>
   <div class="carousel-inner" [ngStyle]="{'display': multilist ? 'flex' : 'block'}"><ng-content></ng-content></div>
   <a class="left carousel-control carousel-control-prev" [class.disabled]="activeSlide === 0 && noWrap" (click)="previousSlide()" *ngIf="slides.length > 1">

src/carousel/carousel.component.ts

@@ -46,6 +46,9 @@ export class CarouselComponent implements AfterViewInit, OnDestroy {
   @Input() noPause: boolean;
   /*  If `true` — carousel-indicators are visible  */
   @Input() showIndicators: boolean;
+  /* If `true` - carousel indicators indicate slides chunks
+     works ONLY if singleSlideOffset = FALSE */
+  @Input() indicatorsByChunk = false;
   /* If value more then 1 — carousel works in multilist mode */
   @Input() itemsPerSlide = 1;
   /* If `true` — carousel shifts by one element. By default carousel shifts by number
@@ -118,6 +121,9 @@ export class CarouselComponent implements AfterViewInit, OnDestroy {
 
   ngAfterViewInit(): void {
     setTimeout(() => {
+      if (this.singleSlideOffset) {
+        this.indicatorsByChunk = false;
+      }
       if (this.multilist) {
         this._chunkedSlides = chunkByNumber(
           this.mapSlidesAndIndexes(),
@@ -259,9 +265,9 @@ export class CarouselComponent implements AfterViewInit, OnDestroy {
     }
 
     if (!this.multilist) {
-      this.activeSlide = index;
+      this.activeSlide = this.indicatorsByChunk ? index * this.itemsPerSlide : index;
     } else {
-      this.selectSlideRange(index);
+      this.selectSlideRange(this.indicatorsByChunk ? index * this.itemsPerSlide : index);
     }
   }
 
@@ -308,6 +314,12 @@ export class CarouselComponent implements AfterViewInit, OnDestroy {
     return index === 0;
   }
 
+  indicatorsSlides(): SlideComponent[] {
+    return this.slides.filter(
+      (slide: SlideComponent, index: number) => !this.indicatorsByChunk || index % this.itemsPerSlide === 0
+    );
+  }
+
   private selectInitialSlides(): void {
     const startIndex = this.startFromIndex <= this._slides.length
       ? this.startFromIndex

src/carousel/carousel.config.ts

@@ -14,6 +14,10 @@ export class CarouselConfig {
   /** Show carousel-indicators */
   showIndicators = true;
 
+  /* If `true` - carousel indicators indicate slides chunks
+     works ONLY if singleSlideOffset = FALSE */
+  indicatorsByChunk = false;
+
   /* If value more then 1 — carousel works in multilist mode */
   itemsPerSlide = 1;