OsirionTestimonialCarousel

OsirionTestimonialCarousel shows testimonials as a rail of cards that loops continuously. Each card is an OsirionTestimonialCard with the person's name, role, company, quote and optionally a photo, star rating and links. The loop is a CSS animation, so it runs under static server-side rendering without script.

Package Osirion.Blazor.Core, namespace Osirion.Blazor.Components. Source on GitHub.

@using Osirion.Blazor.Components

@* Sample testimonials from invented people, not customers *@
<OsirionTestimonialCarousel SectionTitle="Sample testimonials"
                            CustomTestimonials="testimonials"
                            CardHeight="220"
                            ShowRating="true" />

@code {
    private static readonly List<TestimonialItem> testimonials =
    [
        new("Ana Petrovic", "Lead developer", "Example Studio", "We moved our documentation site to static SSR in a weekend.", ShowRating: true, Rating: 5),
        new("Sam Lee", "Product manager", "Example Works", "The pages read the same with and without script.", ShowRating: true, Rating: 4),
        new("Jane Doe", "Designer", "Example Agency", "Our editors publish from Markdown files.", ShowRating: true, Rating: 5)
    ];
}

Usage

The enhancement script (dragging, wheel scrolling, pause button) loads through BlazorJSComponents, which AddOsirion registers. If you register Osirion.Blazor.Core without AddOsirion, add the loader in Program.cs:

builder.Services.AddJSComponents();

Always pass your own testimonials. Without CustomTestimonials, the component shows eight built-in sample testimonials from invented people, with photos that load from images.unsplash.com.

@using Osirion.Blazor.Components

<OsirionTestimonialCarousel Title="What our customers say" CustomTestimonials="testimonials" />

@code {
    private readonly List<TestimonialItem> testimonials =
    [
        new("Jane Doe", "CTO", "Northwind Traders", "We moved our docs site to static SSR in a week."),
        new("Sam Lee", "Lead Developer", "Fabrikam", "The components render the same with and without script."),
        new("Ana Ruiz", "Product Manager", "Contoso", "Our editors publish from GitHub without touching code."),
    ];
}

With photos, ratings and links to case studies:

<OsirionTestimonialCarousel Title="Customer stories"
                            SectionTitle="Customer testimonials"
                            CustomTestimonials="testimonials"
                            ShowRating="true"
                            CardVariant="TestimonialVariant.Highlighted"
                            CardHeight="340"
                            Speed="CarouselSpeed.Slow" />

@code {
    private readonly List<TestimonialItem> testimonials =
    [
        new("Jane Doe", "CTO", "Northwind Traders", "We moved our docs site to static SSR in a week.",
            ProfileImageUrl: "/images/people/jane.jpg",
            ShowRating: true, Rating: 5,
            ReadMoreHref: "/customers/northwind", ReadMoreText: "Read the case study"),
        new("Sam Lee", "Lead Developer", "Fabrikam", "The components render the same with and without script.",
            ProfileImageUrl: "/images/people/sam.jpg",
            LinkedInUrl: "https://www.linkedin.com/in/your-profile",
            ShowRating: true, Rating: 4),
        new("Ana Ruiz", "Product Manager", "Contoso", "Our editors publish from GitHub without touching code.",
            ShowRating: true, Rating: 5),
    ];
}

A star rating shows only when both the carousel's ShowRating and the item's ShowRating are true.

Parameters

Unmatched attributes go on the <section>.

TestimonialItem

TestimonialItem is a record: new TestimonialItem(Name, Position, Company, TestimonialText, ...) with the other values named.

Behavior

• Without script the rail loops with a CSS animation. The cards are rendered twice so the loop has no seam; the second set is aria-hidden and inert, so screen readers read each testimonial once and its links are not in the tab order.
• With script the visitor can drag the rail or move it with a horizontal wheel or trackpad gesture, a pause button appears in the top right corner, and the photos, stars and LinkedIn icons are shown in color only on the cards nearest the center (and on the card under the pointer).
• Pausing. Hover pauses the loop when PauseOnHover is on; keyboard focus inside the carousel always pauses it. Translate the pause button with data-pause-label and data-play-label attributes on the component.
• Reduced motion. Under prefers-reduced-motion: reduce the animation stops and every testimonial is shown once, in a wrapped grid of two columns (one on narrow screens).
• Fewer than three items. The rail repeats items until it holds three, so the loop has no gap. The repeats are real cards, not hidden copies, and the list you passed is not changed. Pass at least three testimonials to avoid them. An empty list renders an empty rail.
• MaxVisibleTestimonials. When it is a positive number, only that many testimonials are shown, and a value below three is padded by repeating them as above. Zero or less shows all of them.
• Images. The photos of the first two cards load eagerly with high fetch priority; the rest load lazily.
• Text and URLs. Names, roles and quotes are rendered as text, so Razor encodes them. LinkedInUrl, ReadMoreHref and ProfileImageUrl are written as given, so pass only URLs you trust.

Styling

Spacing, font sizes and colors come from the theme tokens (--osirion-spacing-*, --osirion-font-size-*, --osirion-text-primary), so a CSS framework adapter restyles the carousel with the rest of the site. The cards have their own classes; see the testimonial card page.

Related

• Testimonial card
• InfiniteLogoCarousel
• Carousels