@code {
    [Parameter, Required] public FeBk[] Bks { get; set; }
}

<div id="DiscBkSlider" class="carousel .carousel-dark slide bk-container" data-bs-ride="carousel" data-bs-interval="false">
    <div class="carousel-indicators bk-indicators">
        @foreach (var bk in (Bks).KeepNoEmpty().WithIndex())
        {
            <button type="button" data-bs-target="#DiscBkSlider" data-bs-slide-to="@bk.index" class="@(bk.index==0?"active":"")"></button>
        }
    </div>
    <div class="carousel-inner">
        @foreach (var bk in (Bks).KeepNoEmpty().WithIndex())
        {
            <div class="carousel-item @(bk.index==0?"active":"")">
                <img src="@bk.item?.Path" onerror="this.src='blazor-192.png'" class="d-block w-100" onclick="window.open('@bk.item?.Path.UrlEscape()')">
                <div class="carousel-caption d-none d-md-block">
                    <span class="bk-filename-text">@bk.item?.Name</span>
                </div>
            </div>
        }
    </div>
    <button class="carousel-control-prev bk-arrow" type="button" data-bs-target="#DiscBkSlider" data-bs-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Previous</span>
    </button>
    <button class="carousel-control-next bk-arrow" type="button" data-bs-target="#DiscBkSlider" data-bs-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Next</span>
    </button>
</div>