Carousel - Home

DbFirst.BlazorWebApp/Components/Pages/Home.razor

@@ -1,7 +1,43 @@
-@page "/"
+@rendermode InteractiveServer
+
+@page "/"
 
 <PageTitle>Home</PageTitle>
 
-<h1>Hello, world!</h1>
+<h1>Database first</h1>
 
-Welcome to your new app.
+<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; }
+        public string AlternateText { get; set; }
+
+        public CarouselData(string source, string alt)
+        {
+            Source = source;
+            AlternateText = alt;
+        }
+    }
+}

DbFirst.BlazorWebApp/DbFirst.BlazorWebApp.csproj

@@ -14,4 +14,8 @@
     <PackageReference Include="Microsoft.AspNetCore.SignalR.Client" Version="8.0.22" />
   </ItemGroup>
 
+  <ItemGroup>
+    <Folder Include="wwwroot\images\" />
+  </ItemGroup>
+
 </Project>