@rendermode InteractiveServer

@page "/"

<PageTitle>Home</PageTitle>

<h1>Database first</h1>

<DxCarousel Width="100%"
            Height="calc(100vh - 9rem)"
            Data="@GetCarouselData()"
            ImageSrcField="Source"
            ImageAltField="AlternateText"
            LoopNavigationEnabled="true"
            SlideShowEnabled="true"
            SlideShowDelay="3000"
            PauseSlideShowOnHover="true"
            ImageSizeMode="CarouselImageSizeMode.FitProportional">
</DxCarousel>

@code {
    List<CarouselData> GetCarouselData()
    {
        return new List<CarouselData>
        {
            new CarouselData("/images/DbFirstBefehl.png", "DbFirstBefehl"),
            new CarouselData("/images/CQRS - Katalog-Datenfluss.png", "CQRS - Katalog-Datenfluss"),
            new CarouselData("/images/CQRS - Catalog Create, Update, Delete.png", "CQRS - Catalog Create, Update, Delete"),
        };
    }

    public class CarouselData
    {
        public string Source { get; set; } = string.Empty;
        public string AlternateText { get; set; } = string.Empty;

        public CarouselData(string source, string alt)
        {
            Source = source;
            AlternateText = alt;
        }
    }
}