Tengo una lista de elementos del carrusel y cada elemento del carrusel puede tener varios botones. Funciona bien cuando tenemos varios elementos de carrusel y la cantidad de botones es inferior a dos. Si agrego más de dos botones, la vista previa del carrusel solo muestra el ícono siguiente y anterior. Además, si elimino un botón de uno de los elementos del carrusel, el carrusel deja de funcionar. El botón de un elemento del carrusel se muestra encima de los botones de otro elemento del carrusel.

 <div class="carousels"> <div id="carouselControls" class="carousel slide" data-interval="false" data-ride="carousel"> <div class="carousel-inner"> <div *ngFor="let carousel of carousels; let firstItem = first; let i = index;" class="carousel-item" [ngClass]="{active: firstItem}"> <div class="mt-2"> <img class="img-thumbnail mb-2" src="{{carousel.imageUrl}}" onerror="this.src='../../../assets/img/no-image-available.png'"> <div *ngIf="carousel.buttons && carousel.buttons.length > 0"> <div class="buttons"> <ul class="p-1 rounded border border-secondary"> <li class="button" *ngFor="let button of carousel.buttons"> {{button.title}} </li> </ul> </div> </div> </div> </div> </div> <a class="carousel-control-prev" href="#carouselControls" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#carouselControls" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> </div>