|
101 | 101 | You can attach the indicators to the carousel, lengthwise the controls, too.
|
102 | 102 | </p>
|
103 | 103 | <app-docs-example href="components/carousel/#with-indicators">
|
104 |
| - <c-carousel (itemChange)="onItemChange($event)" [activeIndex]="1" [dark]="true" [interval]="5000" direction="prev"> |
105 |
| - <c-carousel-indicators /> |
106 |
| -<!-- <c-carousel-indicators #indicators="cCarouselIndicators">--> |
107 |
| -<!-- <ng-template cTemplateId="carouselIndicatorsTemplate">--> |
108 |
| -<!-- @for (slide of slides[1]; track slide; let i = $index) {--> |
109 |
| -<!-- <button--> |
110 |
| -<!-- [attr.data-coreui-target]="i"--> |
111 |
| -<!-- type="button"--> |
112 |
| -<!-- (click)="indicators.onClick(i)"--> |
113 |
| -<!-- [class]="{ active: indicators.active === i, border: '1px' }"--> |
114 |
| -<!-- [attr.aria-current]="indicators.active === i">--> |
115 |
| -<!-- <img--> |
116 |
| -<!-- [src]="slide.src"--> |
117 |
| -<!-- alt="{{slide.title}}"--> |
118 |
| -<!-- class="d-flex w-100"--> |
119 |
| -<!-- loading="lazy"--> |
120 |
| -<!-- />--> |
121 |
| -<!-- </button>--> |
122 |
| -<!-- }--> |
123 |
| -<!-- </ng-template>--> |
124 |
| -<!-- </c-carousel-indicators>--> |
125 |
| - <c-carousel-inner> |
126 |
| - @for (slide of slides[0]; track slide.src) { |
127 |
| - <c-carousel-item> |
128 |
| - <img |
129 |
| - [src]="slide.src" |
130 |
| - alt="{{slide.title}}" |
131 |
| - class="d-block w-100" |
132 |
| - loading="lazy" |
133 |
| - /> |
134 |
| - </c-carousel-item> |
135 |
| - } |
136 |
| - </c-carousel-inner> |
137 |
| - </c-carousel> |
| 104 | +<c-carousel (itemChange)="onItemChange($event)" [activeIndex]="1" [dark]="true" [interval]="5000" direction="prev"> |
| 105 | + <c-carousel-indicators /> |
| 106 | +<!-- <c-carousel-indicators #indicators="cCarouselIndicators">--> |
| 107 | +<!-- <ng-template cTemplateId="carouselIndicatorsTemplate">--> |
| 108 | +<!-- @for (slide of slides[0]; track slide; let i = $index) {--> |
| 109 | +<!-- <button--> |
| 110 | +<!-- [attr.data-coreui-target]="i"--> |
| 111 | +<!-- type="button"--> |
| 112 | +<!-- (click)="indicators.onClick(i)"--> |
| 113 | +<!-- [class]="{ active: indicators.active === i }"--> |
| 114 | +<!-- [attr.aria-current]="indicators.active === i"--> |
| 115 | +<!-- [cBorder]="true"--> |
| 116 | +<!-- style="height: auto;"--> |
| 117 | +<!-- cRounded="pill"--> |
| 118 | +<!-- >--> |
| 119 | +<!-- <img--> |
| 120 | +<!-- [src]="slide.src"--> |
| 121 | +<!-- alt="{{slide.title}}"--> |
| 122 | +<!-- class="d-flex w-100"--> |
| 123 | +<!-- loading="lazy"--> |
| 124 | +<!-- cRounded="pill"--> |
| 125 | +<!-- />--> |
| 126 | +<!-- </button>--> |
| 127 | +<!-- }--> |
| 128 | +<!-- </ng-template>--> |
| 129 | +<!-- </c-carousel-indicators>--> |
| 130 | + <c-carousel-inner> |
| 131 | + @for (slide of slides[0]; track slide.src) { |
| 132 | + <c-carousel-item> |
| 133 | + <img |
| 134 | + [src]="slide.src" |
| 135 | + alt="{{slide.title}}" |
| 136 | + class="d-block w-100" |
| 137 | + loading="lazy" |
| 138 | + /> |
| 139 | + </c-carousel-item> |
| 140 | + } |
| 141 | + </c-carousel-inner> |
| 142 | +</c-carousel> |
138 | 143 | </app-docs-example>
|
139 | 144 | </c-card-body>
|
140 | 145 | </c-card>
|
|
0 commit comments