refactor(carousels): add carouselIndicatorTemplate example

Author: xidedix

src/app/views/base/carousels/carousels.component.html

@@ -102,7 +102,25 @@
         </p>
         <app-docs-example href="components/carousel/#with-indicators">
           <c-carousel (itemChange)="onItemChange($event)" [activeIndex]="1" [dark]="true" [interval]="5000" direction="prev">
-            <c-carousel-indicators />
+            <c-carousel-indicators #indicators="cCarouselIndicators">
+              <ng-template cTemplateId="carouselIndicatorsTemplate">
+                @for (slide of slides[1]; track slide; let i = $index) {
+                  <button
+                    [attr.data-coreui-target]="i"
+                    type="button"
+                    (click)="indicators.onClick(i)"
+                    [class]="{ active: indicators.active === i, border: '1px' }"
+                    [attr.aria-current]="indicators.active === i">
+                    <img
+                      [src]="slide.src"
+                      alt="{{slide.title}}"
+                      class="d-flex w-100"
+                      loading="lazy"
+                    />
+                  </button>
+                }
+              </ng-template>
+            </c-carousel-indicators>
             <c-carousel-inner>
               @for (slide of slides[0]; track slide.src) {
                 <c-carousel-item>