nz-carousel with customized dots

[DennisJaamann]

What problem does this feature solve?

The "Dots" in this component are always simple styled buttons

nz-carousel.component.html

<div class="slick-initialized slick-slider" [class.slick-vertical]="nzVertical">
  <div class="slick-list" #slickList tabindex="-1" (keydown)="onKeyDown($event)">
    <div class="slick-track" [style.transform]="transform" #slickTrack>
      <ng-content></ng-content>
    </div>
  </div>
  <ul class="slick-dots" *ngIf="nzDots">
    <li
      *ngFor="let content of slideContents; let i =index"
      [class.slick-active]="content.isActive"
      (click)="setActive(content,i)">
      <button>{{i   1}}</button> <!-- this is always fixed, no way to customize the dots -->
    </li>
  </ul>
</div>

Usage

 <nz-carousel [nzEffect]="effect">
   <div nz-carousel-content *ngFor="let index of array"><h3>{{index}}</h3></div>
</nz-carousel>

What does the proposed API look like?

We could pass a custom component as Dots

nz-carousel.component.html

<div class="slick-initialized slick-slider" [class.slick-vertical]="nzVertical">
  <div class="slick-list" #slickList tabindex="-1" (keydown)="onKeyDown($event)">
    <div class="slick-track" [style.transform]="transform" #slickTrack>
      <ng-content select="[nz-carousel-content]"></ng-content>
    </div>
  </div>
<div *ngIf="nzDots">
   <ng-content select="[nz-carousel-dots]"></ng-content><!-- this way, we can customize the dots to have any component! -->
</div>

Usage

 <nz-carousel [nzEffect]="effect">
   <div nz-carousel-content *ngFor="let index of array"><h3>{{index}}</h3></div>
   <div nz-carousel-dots *ngFor="let index of array"><custom-component>{{index}}</custom-component></div>
</nz-carousel>

[lock]

This thread has been automatically locked because it has not had recent activity. Please open a new issue for related bugs and link to relevant comments in this thread.