HyperCube/Pages/Test.razor

@page "/test"

@code{
    IList<Item> items = new List<Item> {
    new Item {
        Source = "/img/test1.png",
        Alt ="First Slide",
        Caption = "Slide 1",
        Header = "Slide 1 Header"
    },
    new Item {
        Source = "/img/test2.png",
        Alt ="Second Slide",
        Caption = "Slide 2",
        Header = "Slide 2 Header"
    }
};

    class Item
    {
        public string Source { get; set; }
        public string Alt { get; set; }
        public string Caption { get; set; }
        public string Header { get; set; }
    }
}

<BSCarousel NumberOfItems="@items.Count" Interval="1">
    <div class="carousel-inner">
        @for (int i = 0; i < items.Count; i++)
        {
            <BSCarouselItem src="@items[i].Source" alt="@items[i].Alt" />
        }
    </div>
    <BSCarouselIndicators NumberOfItems="@items.Count" />

    @*<BSCarouselControl CarouselDirection="CarouselDirection.Previous" NumberOfItems="@items.Count"/>
        <BSCarouselControl CarouselDirection="CarouselDirection.Next" NumberOfItems="@items.Count"/>*@
</BSCarousel>