Adding Link to Carousel Items

Author: sjefvanleeuwen

src/Blazor.AdminLte.Site.Shared/Pages/Ui/General.razor

@@ -27,14 +27,14 @@
 @code {
     private CarouselItemCollection items = new CarouselItemCollection()
         {
-        new CarouselItem(){Image="https://placehold.it/900x500/39CCCC/ffffff&text=I+Love+Bootstrap",Alt="First slide"},
+        new CarouselItem(){Image="https://placehold.it/900x500/39CCCC/ffffff&text=I+Love+Bootstrap",Alt="First slide",Link="/starter-pages/active-page?slide=1"},
         new CarouselItem(){Image="https://placehold.it/900x500/3c8dbc/ffffff&text=I+Love+Bootstrap",Alt="Second slide"},
-        new CarouselItem(){Image="https://placehold.it/900x500/f39c12/ffffff&text=I+Love+Bootstrap",Alt="Third slide"},
+        new CarouselItem(){Image="https://placehold.it/900x500/f39c12/ffffff&text=I+Love+Bootstrap",Alt="Third slide",Link="/starter-pages/active-page?slide=3"},
     };
     private CarouselItemCollection items1 = new CarouselItemCollection()
         {
-        new CarouselItem(){Image="https://placehold.it/900x500/2c8dbc/ffffff&text=I+Love+Bootstrap",Alt="First slide"},
+        new CarouselItem(){Image="https://placehold.it/900x500/2c8dbc/ffffff&text=I+Love+Bootstrap",Alt="First slide",Link="/starter-pages/active-page?slide=1"},
         new CarouselItem(){Image="https://placehold.it/900x500/19CCCC/ffffff&text=I+Love+Bootstrap",Alt="Second slide"},
-        new CarouselItem(){Image="https://placehold.it/900x500/339c12/ffffff&text=I+Love+Bootstrap",Alt="Third slide"},
+        new CarouselItem(){Image="https://placehold.it/900x500/339c12/ffffff&text=I+Love+Bootstrap",Alt="Third slide",Link="/starter-pages/active-page?slide=3"},
     };
 }

src/Blazor.AdminLte/UIElements/Accordian-Carousel/Carousel.razor

@@ -7,14 +7,14 @@
             <li data-target="#@Identifier" data-slide-to="@i" class='@(i==0 ? "active" : string.Empty)'></li>
         }
     </ol>
-
     <div class="carousel-inner">
-
         @for (int i = 0; i < Items.Count; i++)
         {
-            <div class="carousel-item@(i == Items.Count - 1 ? " active carousel-item-left" : string.Empty) @(i==0 ? " carousel-item-next carousel-item-left" : string.Empty)">
+        <div class="carousel-item@(i == Items.Count - 1 ? " active carousel-item-left" : string.Empty) @(i==0 ? " carousel-item-next carousel-item-left" : string.Empty)">
+            <a href="@Items[i].Link">
                 <img class='d-block w-100' src="@Items[i].Image" alt="@Items[i].Alt">
-            </div>
+            </a>
+        </div>
         }
     </div>
     <a class="carousel-control-prev" href="#@Identifier" role="button" data-slide="prev">

src/Blazor.AdminLte/UIElements/Accordian-Carousel/Carousel.razor.cs

@@ -1,13 +1,13 @@
-using System;
-using System.Collections.Generic;
-using System.Text;
+using System.Collections.Generic;
 
 namespace Blazor.AdminLte
 {
     public class CarouselItem
     {
         public string Image { get; set; }
         public string Alt { get; set; }
+
+        public string Link { get; set; } = "javascript:void(0)";
     }
 
     public class CarouselItemCollection : List<CarouselItem>