I have a list of carousel item and each carousel item can have multiple buttons. It's working fine when we have multiple carousel item and the number of buttons are less then two. If I add more than two button carousel preview only showing next and prev icon. Also if I remove a button from one of the carousel item the carousel stops working. One carousel item's button renders above another carousel item's buttons.

    <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>