Carousel component

BlazorBootstrap.Demo.RCL/Components/Layout/MainLayout.razor.cs

@@ -33,50 +33,51 @@ internal override IEnumerable<NavItem> GetNavItems()
             new (){ Id = "504", Text = "Buttons", Href = "/buttons", IconName = IconName.ToggleOn, ParentId = "5" },
             new (){ Id = "505", Text = "Callout", Href = "/callout", IconName = IconName.StickyFill, ParentId = "5" },
             new (){ Id = "506", Text = "Card", Href = "/card", IconName = IconName.CardHeading, ParentId = "5" },
-            new (){ Id = "507", Text = "Charts", Href = "/charts", IconName = IconName.BarChartLineFill, ParentId = "5", Match = NavLinkMatch.All },
-            new (){ Id = "508", Text = "Collapse", Href = "/collapse", IconName = IconName.ArrowsCollapse, ParentId = "5" },
-            new (){ Id = "509", Text = "Confirm Dialog", Href = "/confirm-dialog", IconName = IconName.QuestionDiamondFill, ParentId = "5" },
-            new (){ Id = "510", Text = "Dropdown", Href = "/dropdown", IconName = IconName.MenuButtonWideFill, ParentId = "5" },
-            new (){ Id = "510", Text = "Google Maps", Href = "/google-maps", IconName = IconName.Map, ParentId = "5" },
+            new (){ Id = "507", Text = "Carousel", Href = "/carousel", IconName = IconName.CollectionPlayFill, ParentId = "5" },
+            new (){ Id = "508", Text = "Charts", Href = "/charts", IconName = IconName.BarChartLineFill, ParentId = "5", Match = NavLinkMatch.All },
+            new (){ Id = "509", Text = "Collapse", Href = "/collapse", IconName = IconName.ArrowsCollapse, ParentId = "5" },
+            new (){ Id = "510", Text = "Confirm Dialog", Href = "/confirm-dialog", IconName = IconName.QuestionDiamondFill, ParentId = "5" },
+            new (){ Id = "511", Text = "Dropdown", Href = "/dropdown", IconName = IconName.MenuButtonWideFill, ParentId = "5" },
+            new (){ Id = "512", Text = "Google Maps", Href = "/google-maps", IconName = IconName.Map, ParentId = "5" },
 
             #region Grid
 
-            new (){ Id = "511", Text = "Grid", IconName = IconName.Grid, ParentId = "5" },            
-            new (){ Id = "51101", Text = "Overview", Href = "/grid/overview", IconName = IconName.Grid, ParentId = "511" }, // first item- do not change
-            new (){ Id = "51102", Text = "Alignment", Href = "/grid/alignment", IconName = IconName.Justify, ParentId = "511" },
-            new (){ Id = "51103", Text = "Custom CSS Class", Href = "/grid/custom-css-class", IconName = IconName.FileTypeCss, ParentId = "511" },
-            new (){ Id = "51104", Text = "Data Binding", Href = "/grid/data-binding", IconName = IconName.GridFill, ParentId = "511" },
-            new (){ Id = "51106", Text = "Detail View", Href = "/grid/detail-view", IconName = IconName.ListNested, ParentId = "511" },
-            new (){ Id = "51107", Text = "Events", Href = "/grid/events", IconName = IconName.LightningChargeFill, ParentId = "511" },
-            new (){ Id = "51107", Text = "Filters", Href = "/grid/filters", IconName = IconName.FunnelFill, ParentId = "511" },
-            new (){ Id = "51108", Text = "Fixed Header", Href = "/grid/fixed-header", IconName = IconName.Table, ParentId = "511" },
-            new (){ Id = "51109", Text = "Freeze Columns", Href = "/grid/freeze-columns", IconName = IconName.LayoutThreeColumns, ParentId = "511" },
-            new (){ Id = "51110", Text = "Grid Settings", Href = "/grid/settings", IconName = IconName.GearFill, ParentId = "511" },
-            new (){ Id = "51111", Text = "Nested Grid", Href = "/grid/nested-grid", IconName = IconName.Pip, ParentId = "511" },
-            new (){ Id = "51112", Text = "Paging", Href = "/grid/paging", IconName = IconName.ChevronBarRight, ParentId = "511" },
-            new (){ Id = "51113", Text = "Selection", Href = "/grid/selection", IconName = IconName.CheckSquareFill, ParentId = "511" },
-            new (){ Id = "51114", Text = "Sorting", Href = "/grid/sorting", IconName = IconName.ArrowDownUp, ParentId = "511" },            
-            new (){ Id = "51115", Text = "Translations", Href = "/grid/translations", IconName = IconName.Translate, ParentId = "511" },            
-            new (){ Id = "51199", Text = "Other", Href = "/grid/other", IconName = IconName.PlusSquareFill, ParentId = "511" }, // last item - do not change
+            new (){ Id = "513", Text = "Grid", IconName = IconName.Grid, ParentId = "5" },            
+            new (){ Id = "51101", Text = "Overview", Href = "/grid/overview", IconName = IconName.Grid, ParentId = "513" }, // first item - do not change
+            new (){ Id = "51102", Text = "Alignment", Href = "/grid/alignment", IconName = IconName.Justify, ParentId = "513" },
+            new (){ Id = "51103", Text = "Custom CSS Class", Href = "/grid/custom-css-class", IconName = IconName.FileTypeCss, ParentId = "513" },
+            new (){ Id = "51104", Text = "Data Binding", Href = "/grid/data-binding", IconName = IconName.GridFill, ParentId = "513" },
+            new (){ Id = "51106", Text = "Detail View", Href = "/grid/detail-view", IconName = IconName.ListNested, ParentId = "513" },
+            new (){ Id = "51107", Text = "Events", Href = "/grid/events", IconName = IconName.LightningChargeFill, ParentId = "513" },
+            new (){ Id = "51107", Text = "Filters", Href = "/grid/filters", IconName = IconName.FunnelFill, ParentId = "513" },
+            new (){ Id = "51108", Text = "Fixed Header", Href = "/grid/fixed-header", IconName = IconName.Table, ParentId = "513" },
+            new (){ Id = "51109", Text = "Freeze Columns", Href = "/grid/freeze-columns", IconName = IconName.LayoutThreeColumns, ParentId = "513" },
+            new (){ Id = "51110", Text = "Grid Settings", Href = "/grid/settings", IconName = IconName.GearFill, ParentId = "513" },
+            new (){ Id = "51111", Text = "Nested Grid", Href = "/grid/nested-grid", IconName = IconName.Pip, ParentId = "513" },
+            new (){ Id = "51112", Text = "Paging", Href = "/grid/paging", IconName = IconName.ChevronBarRight, ParentId = "513" },
+            new (){ Id = "51113", Text = "Selection", Href = "/grid/selection", IconName = IconName.CheckSquareFill, ParentId = "513" },
+            new (){ Id = "51114", Text = "Sorting", Href = "/grid/sorting", IconName = IconName.ArrowDownUp, ParentId = "513" },            
+            new (){ Id = "51115", Text = "Translations", Href = "/grid/translations", IconName = IconName.Translate, ParentId = "513" },            
+            new (){ Id = "51199", Text = "Other", Href = "/grid/other", IconName = IconName.PlusSquareFill, ParentId = "513" }, // last item - do not change
 
             #endregion Grid
 
-            new (){ Id = "512", Text = "Modals", Href = "/modals", IconName = IconName.WindowStack, ParentId = "5" },
-            new (){ Id = "513", Text = "Offcanvas", Href = "/offcanvas", IconName = IconName.LayoutSidebarReverse, ParentId = "5" },
-            new (){ Id = "514", Text = "Pagination", Href = "/pagination", IconName = IconName.ThreeDots, ParentId = "5" },
-            new (){ Id = "515", Text = "PDF Viewer", Href = "/pdf-viewer", IconName = IconName.FilePdfFill, ParentId = "5" },
-            new (){ Id = "516", Text = "Placeholders", Href = "/placeholders", IconName = IconName.ColumnsGap, ParentId = "5" },
-            new (){ Id = "517", Text = "Preload", Href = "/preload", IconName = IconName.ArrowClockwise, ParentId = "5" },
-            new (){ Id = "518", Text = "Progress", Href = "/progress", IconName = IconName.UsbC, ParentId = "5" },
-            new (){ Id = "519", Text = "Ribbon", Href = "/ribbon", IconName = IconName.WindowStack, ParentId = "5" },
-            new (){ Id = "520", Text = "Script Loader", Href = "/script-loader", IconName = IconName.CodeSlash, ParentId = "5" },
-            new (){ Id = "521", Text = "Sidebar", Href = "/sidebar", IconName = IconName.LayoutSidebar, ParentId = "5" },
-            new (){ Id = "522", Text = "Sidebar 2", Href = "/sidebar2", IconName = IconName.ListNested, ParentId = "5" },
-            new (){ Id = "523", Text = "Sortable List", Href = "/sortable-list", IconName = IconName.ArrowsMove, ParentId = "5" },
-            new (){ Id = "524", Text = "Spinner", Href = "/spinners", IconName = IconName.ArrowRepeat, ParentId = "5" },
-            new (){ Id = "525", Text = "Tabs", Href = "/tabs", IconName = IconName.WindowPlus, ParentId = "5" },
-            new (){ Id = "526", Text = "Toasts", Href = "/toasts", IconName = IconName.ExclamationTriangleFill, ParentId = "5" },
-            new (){ Id = "527", Text = "Tooltips", Href = "/tooltips", IconName = IconName.ChatSquareDotsFill, ParentId = "5" },
+            new (){ Id = "514", Text = "Modals", Href = "/modals", IconName = IconName.WindowStack, ParentId = "5" },
+            new (){ Id = "515", Text = "Offcanvas", Href = "/offcanvas", IconName = IconName.LayoutSidebarReverse, ParentId = "5" },
+            new (){ Id = "516", Text = "Pagination", Href = "/pagination", IconName = IconName.ThreeDots, ParentId = "5" },
+            new (){ Id = "517", Text = "PDF Viewer", Href = "/pdf-viewer", IconName = IconName.FilePdfFill, ParentId = "5" },
+            new (){ Id = "518", Text = "Placeholders", Href = "/placeholders", IconName = IconName.ColumnsGap, ParentId = "5" },
+            new (){ Id = "519", Text = "Preload", Href = "/preload", IconName = IconName.ArrowClockwise, ParentId = "5" },
+            new (){ Id = "520", Text = "Progress", Href = "/progress", IconName = IconName.UsbC, ParentId = "5" },
+            new (){ Id = "521", Text = "Ribbon", Href = "/ribbon", IconName = IconName.WindowStack, ParentId = "5" },
+            new (){ Id = "522", Text = "Script Loader", Href = "/script-loader", IconName = IconName.CodeSlash, ParentId = "5" },
+            new (){ Id = "523", Text = "Sidebar", Href = "/sidebar", IconName = IconName.LayoutSidebar, ParentId = "5" },
+            new (){ Id = "524", Text = "Sidebar 2", Href = "/sidebar2", IconName = IconName.ListNested, ParentId = "5" },
+            new (){ Id = "525", Text = "Sortable List", Href = "/sortable-list", IconName = IconName.ArrowsMove, ParentId = "5" },
+            new (){ Id = "526", Text = "Spinner", Href = "/spinners", IconName = IconName.ArrowRepeat, ParentId = "5" },
+            new (){ Id = "527", Text = "Tabs", Href = "/tabs", IconName = IconName.WindowPlus, ParentId = "5" },
+            new (){ Id = "528", Text = "Toasts", Href = "/toasts", IconName = IconName.ExclamationTriangleFill, ParentId = "5" },
+            new (){ Id = "529", Text = "Tooltips", Href = "/tooltips", IconName = IconName.ChatSquareDotsFill, ParentId = "5" },
 
             new (){ Id = "6", Text = "Data Visualization", IconName = IconName.BarChartFill, IconColor = IconColor.Warning },
             new (){ Id = "600", Text = "Bar Chart", Href = "/charts/bar-chart", IconName = IconName.BarChartFill, ParentId = "6", Match = NavLinkMatch.All },

BlazorBootstrap.Demo.RCL/Components/Pages/Carousel/CarouselDocumentation.razor

@@ -0,0 +1,101 @@
+@page "/carousel"
+
+<PageTitle>@title</PageTitle>
+
+<MetaTags PageUrl="@pageUrl" Title="@title" Description="@description" ImageUrl="@imageUrl" />
+
+<h1>Blazor Carousel</h1>
+<div class="lead mb-3">Blazor Carousel component is a slideshow component that cycles through elements, images, or slides of text.</div>
+
+<CarbonAds />
+
+<SectionHeading Size="HeadingSize.H2" Text="Examples" PageUrl="@pageUrl" HashTagName="examples" />
+<div class="mb-3">Here is a basic example of a carousel with three slides.</div>
+<Demo Type="typeof(Carousel_Demo_01_Examples)" Tabs="true" />
+
+<SectionHeading Size="HeadingSize.H2" Text="Indicators" PageUrl="@pageUrl" HashTagName="indicators" />
+<div class="mb-3">
+    You can add indicators to the carousel, alongside the previous/next controls.
+    The indicators allow users to jump directly to a particular slide.
+    Set <code>ShowIndicators</code> to <code>true</code> to show the indicators.
+</div>
+<Demo Type="typeof(Carousel_Demo_02_Indicators)" Tabs="true" />
+
+<SectionHeading Size="HeadingSize.H2" Text="Captions" PageUrl="@pageUrl" HashTagName="captions" />
+<div class="mb-3">
+    You can add captions to your slides with the <code>CarouselCaption</code> component within any <code>CarouselItem</code>.
+    They can be easily hidden on smaller viewports.
+</div>
+<Demo Type="typeof(Carousel_Demo_03_Captions)" Tabs="true" />
+
+<SectionHeading Size="HeadingSize.H2" Text="Crossfade" PageUrl="@pageUrl" HashTagName="Crossfade" />
+<div class="mb-3">
+    To animate slides with a fading transition instead of sliding, set <code>Crossfade</code> to <code>true</code>.
+</div>
+<Demo Type="typeof(Carousel_Demo_04_Crossfade)" Tabs="true" />
+
+<SectionHeading Size="HeadingSize.H2" Text="Autoplaying carousels" PageUrl="@pageUrl" HashTagName="autoplaying-carousels" />
+<div class="mb-3">
+    You can make your carousels autoplay on page load by setting the <code>Autoplay</code> parameter to <code>CarouselAutoPlay.StartOnPageLoad</code>.
+    Autoplaying carousels automatically pause while hovered with the mouse.
+</div>
+<Demo Type="typeof(Carousel_Demo_05_Autoplay_A_StartOnPageLoad)" Tabs="true" />
+<div class="my-3">
+    When the <code>Autoplay</code> parameter is set to <code>CarouselAutoPlay.StartAfterUserInteraction</code>, the carousel won’t automatically start to cycle on page load.
+    Instead, it will only start after the first user interaction.
+</div>
+<Demo Type="typeof(Carousel_Demo_05_Autoplay_B_StartAfterUserInteraction)" Tabs="true" />
+
+<SectionHeading Size="HeadingSize.H2" Text="Individual carousel item interval" PageUrl="@pageUrl" HashTagName="individual-carousel-item-interval" />
+<div class="mb-3">
+    Add <code>Interval</code> parameter to a <code>CarouselItem</code> component to change the amount of time to delay between automatically cycling to the next item.
+</div>
+<Demo Type="typeof(Carousel_Demo_06_Individual_Carouselitem_Interval)" Tabs="true" />
+
+<SectionHeading Size="HeadingSize.H2" Text="Autoplaying carousels without controls" PageUrl="@pageUrl" HashTagName="autoplaying-carousels-without-controls" />
+<div class="mb-3">
+    Hide the controls by setting <code>ShowPreviousNextControls</code> parameter to <code>false</code>.
+</div>
+<Demo Type="typeof(Carousel_Demo_07_Autoplaying_Carousels_without_Controls)" Tabs="true" />
+
+<SectionHeading Size="HeadingSize.H2" Text="Disable touch swiping" PageUrl="@pageUrl" HashTagName="disable-touch-swiping" />
+<div class="mb-3">
+    Carousels support swiping left/right on touchscreen devices to move between slides.
+    This can be disabled by setting the <code>Touch</code> option to <code>false</code>.
+</div>
+<Demo Type="typeof(Carousel_Demo_08_Touch)" Tabs="true" />
+
+<SectionHeading Size="HeadingSize.H2" Text="Events" PageUrl="@pageUrl" HashTagName="events" />
+<div class="mb-3">
+    Blazor Bootstrap Carousel component exposes a two events for hooking into Carousel functionality.
+    <table class="table">
+        <thead>
+            <tr>
+                <th scope="col">Event Name</th>
+                <th scope="col">Description</th>
+            </tr>
+        </thead>
+        <tbody class="table-group-divider">
+            <tr>
+                <th scope="row"><code>Onslide</code></th>
+                <td>Fires immediately when the slide instance method is invoked.</td>
+            </tr>
+            <tr>
+                <th scope="row"><code>Onslid</code></th>
+                <td>Fired when the carousel has completed its slide transition.</td>
+            </tr>
+        </tbody>
+    </table>
+</div>
+<Demo Type="typeof(Carousel_Demo_09_Events)" Tabs="true" />
+
+<Callout HideHeading="true">
+    <b>NOTE:</b> All of the images were generated using Microsoft Designer.
+</Callout>
+
+@code {
+    private string pageUrl = "/carousel";
+    private string title = "Blazor Carousel Component";
+    private string description = "Blazor Carousel component is a slideshow component that cycles through elements, images, or slides of text.";
+    private string imageUrl = "https://i.imgur.com/YoZd9Hy.png";
+}

BlazorBootstrap.Demo.RCL/Components/Pages/Carousel/Carousel_Demo_01_Examples.razor

@@ -0,0 +1,11 @@
+<Carousel>
+    <CarouselItem Active="true">
+        <Image Src="_content/BlazorBootstrap.Demo.RCL/images/slide-01.png" />
+    </CarouselItem>
+    <CarouselItem>
+        <Image Src="_content/BlazorBootstrap.Demo.RCL/images/slide-02.png" />
+    </CarouselItem>
+    <CarouselItem>
+        <Image Src="_content/BlazorBootstrap.Demo.RCL/images/slide-03.png" />
+    </CarouselItem>
+</Carousel>

BlazorBootstrap.Demo.RCL/Components/Pages/Carousel/Carousel_Demo_02_Indicators.razor

@@ -0,0 +1,11 @@
+<Carousel ShowIndicators="true">
+    <CarouselItem>
+        <Image Src="_content/BlazorBootstrap.Demo.RCL/images/slide-01.png" />
+    </CarouselItem>
+    <CarouselItem>
+        <Image Src="_content/BlazorBootstrap.Demo.RCL/images/slide-02.png" />
+    </CarouselItem>
+    <CarouselItem Active="true">
+        <Image Src="_content/BlazorBootstrap.Demo.RCL/images/slide-03.png" />
+    </CarouselItem>
+</Carousel>

BlazorBootstrap.Demo.RCL/Components/Pages/Carousel/Carousel_Demo_03_Captions.razor

@@ -0,0 +1,23 @@
+<Carousel ShowIndicators="true">
+    <CarouselItem Active="true">
+        <Image Src="_content/BlazorBootstrap.Demo.RCL/images/slide-04.png" />
+        <CarouselCaption>
+            <h2>Earth Day</h2>
+            <p>Let's unite to protect our planet and create a sustainable future for generations to come.</p>
+        </CarouselCaption>
+    </CarouselItem>
+    <CarouselItem>
+        <Image Src="_content/BlazorBootstrap.Demo.RCL/images/slide-05.png" />
+        <CarouselCaption>
+            <h2>International Yoga Day</h2>
+            <p>Embrace the ancient art of harmony for a healthier, happier you.</p>
+        </CarouselCaption>
+    </CarouselItem>
+    <CarouselItem>
+        <Image Src="_content/BlazorBootstrap.Demo.RCL/images/slide-06.png" />
+        <CarouselCaption>
+            <h2>World Water Day</h2>
+            <p>Every drop counts, let's protect our planet's most precious resource.</p>
+        </CarouselCaption>
+    </CarouselItem>
+</Carousel>

BlazorBootstrap.Demo.RCL/Components/Pages/Carousel/Carousel_Demo_04_Crossfade.razor

@@ -0,0 +1,11 @@
+<Carousel Crossfade="true">
+    <CarouselItem Active="true">
+        <Image Src="_content/BlazorBootstrap.Demo.RCL/images/slide-01.png" />
+    </CarouselItem>
+    <CarouselItem>
+        <Image Src="_content/BlazorBootstrap.Demo.RCL/images/slide-02.png" />
+    </CarouselItem>
+    <CarouselItem>
+        <Image Src="_content/BlazorBootstrap.Demo.RCL/images/slide-03.png" />
+    </CarouselItem>
+</Carousel>

BlazorBootstrap.Demo.RCL/Components/Pages/Carousel/Carousel_Demo_05_Autoplay_A_StartOnPageLoad.razor

@@ -0,0 +1,11 @@
+<Carousel Autoplay="CarouselAutoPlay.StartOnPageLoad">
+    <CarouselItem Active="true">
+        <Image Src="_content/BlazorBootstrap.Demo.RCL/images/slide-01.png" />
+    </CarouselItem>
+    <CarouselItem>
+        <Image Src="_content/BlazorBootstrap.Demo.RCL/images/slide-02.png" />
+    </CarouselItem>
+    <CarouselItem>
+        <Image Src="_content/BlazorBootstrap.Demo.RCL/images/slide-03.png" />
+    </CarouselItem>
+</Carousel>

BlazorBootstrap.Demo.RCL/Components/Pages/Carousel/Carousel_Demo_05_Autoplay_B_StartAfterUserInteraction.razor

@@ -0,0 +1,11 @@
+<Carousel Autoplay="CarouselAutoPlay.StartAfterUserInteraction">
+    <CarouselItem Active="true">
+        <Image Src="_content/BlazorBootstrap.Demo.RCL/images/slide-01.png" />
+    </CarouselItem>
+    <CarouselItem>
+        <Image Src="_content/BlazorBootstrap.Demo.RCL/images/slide-02.png" />
+    </CarouselItem>
+    <CarouselItem>
+        <Image Src="_content/BlazorBootstrap.Demo.RCL/images/slide-03.png" />
+    </CarouselItem>
+</Carousel>

BlazorBootstrap.Demo.RCL/Components/Pages/Carousel/Carousel_Demo_06_Individual_Carouselitem_Interval.razor

@@ -0,0 +1,11 @@
+<Carousel Autoplay="CarouselAutoPlay.StartOnPageLoad">
+    <CarouselItem Active="true" Interval="10000">
+        <Image Src="_content/BlazorBootstrap.Demo.RCL/images/slide-01.png" />
+    </CarouselItem>
+    <CarouselItem Interval="2000">
+        <Image Src="_content/BlazorBootstrap.Demo.RCL/images/slide-02.png" />
+    </CarouselItem>
+    <CarouselItem>
+        <Image Src="_content/BlazorBootstrap.Demo.RCL/images/slide-03.png" />
+    </CarouselItem>
+</Carousel>