@inherits DComponentBase @inject NavigationManager NavigationManager @* daisyUI Carousel: https://daisyui.com/components/carousel/ . A scroll-snap strip of DCarouselItem children; the user scrolls or swipes it. Give each item w-full for one slide at a time. ShowNavigation (previous/next on every slide) and ShowIndicators (numbered buttons under the strip) are links to the slides' ids, as in daisyUI's examples: they keep the current path, so Blazor treats them as same-page fragments and scrolls the slide into view. *@ @if (ShowIndicators) {
@Strip
@for (var i = 0; i < items.Count; i++) { @(i + 1) }
} else { @Strip }
@code { [Parameter] public RenderFragment ChildContent { get; set; } [Parameter] public DCarouselSnap Snap { get; set; } [Parameter] public DDirection Direction { get; set; } /// Previous/next buttons on every slide. [Parameter] public bool ShowNavigation { get; set; } /// A row of numbered buttons under the strip, one per slide. [Parameter] public bool ShowIndicators { get; set; } [Parameter] public string PreviousText { get; set; } = "Previous slide"; [Parameter] public string NextText { get; set; } = "Next slide"; [Parameter] public string SlideText { get; set; } = "Slide"; readonly List items = new(); readonly string uid = "d" + Guid.NewGuid().ToString("N")[..8]; RenderFragment Strip => @
@ChildContent
; string CssClass => Cx("carousel", SnapClass, Direction == DDirection.Vertical ? "carousel-vertical" : null, Class); string SnapClass => Snap switch { DCarouselSnap.Center => "carousel-center", DCarouselSnap.End => "carousel-end", _ => null }; internal int Count => items.Count; internal int IndexOf(DCarouselItem item) => items.IndexOf(item); internal string SlideId(int index) => $"{uid}-{index + 1}"; /// The current page plus the slide's fragment; the index wraps around. internal string Link(int index) { var path = NavigationManager.ToBaseRelativePath(NavigationManager.Uri); var hash = path.IndexOf('#'); if (hash >= 0) path = path[..hash]; return $"{path}#{SlideId((index % items.Count + items.Count) % items.Count)}"; } internal void Add(DCarouselItem item) { items.Add(item); StateHasChanged(); } internal void Remove(DCarouselItem item) { items.Remove(item); StateHasChanged(); } }