InfiniteLogoCarousel Component

InfiniteLogoCarousel shows a row of client, partner or technology logos. Turn on EnableAutoScroll and the row loops continuously; leave it off for a static row. Logos can link somewhere and can have separate light and dark images.

Usage

The enhancement script loads through the BlazorJSComponents package. Register its services once in Program.cs:

builder.Services.AddJSComponents();

Always pass your own logos. Without CustomLogos, the component shows built-in sample logos with placeholder links.

@using Osirion.Blazor.Components

<InfiniteLogoCarousel CustomLogos="logos" SectionTitle="Our clients" />

@code {
    private readonly LogoItem[] logos =
    [
        new("/images/clients/northwind.svg", "Northwind Traders"),
        new("/images/clients/fabrikam.svg", "Fabrikam"),
        new("/images/clients/adventure-works.svg", "Adventure Works"),
    ];
}

A looping strip with a heading, links and a logo that has light and dark versions:

<InfiniteLogoCarousel Title="Trusted by teams like these"
                      SectionTitle="Client logos"
                      CustomLogos="logos"
                      EnableAutoScroll="true"
                      AnimationDuration="40"
                      LogoWidth="160"
                      LogoHeight="64" />

@code {
    private readonly LogoItem[] logos =
    [
        new("/images/clients/northwind.svg", "Northwind Traders", Url: "/customers/northwind", Target: "_self"),
        new("/images/clients/contoso-light.svg", "Contoso",
            LightImageUrl: "/images/clients/contoso-light.svg",
            DarkImageUrl: "/images/clients/contoso-dark.svg"),
        new("/images/clients/fabrikam.svg", "Fabrikam", EnableGrayscale: false),
    ];
}

Parameters

Unmatched attributes go on the <section>.

LogoItem

LogoItem is a record: new LogoItem(ImageUrl, AltText, ...) with the optional values named.

Behavior

• Without script the logos render as a list. Logos that do not fit the width are cut off at the faded edges, so either keep a static row short or turn on EnableAutoScroll. With auto-scroll, the CSS animation runs without script.
• With script, the logo nearest the center and its two neighbors are shown in color when EnableGrayscale is on. With auto-scroll on, the visitor can also drag the row or scroll it with a horizontal wheel or trackpad gesture, and a pause button appears in the top right corner.
• Pausing. Hover pauses the loop when PauseOnHover is on; keyboard focus inside the carousel always pauses it. Under prefers-reduced-motion: reduce the loop does not run.
• Accessibility. The <section> is named by SectionTitle, so set it to something that describes the logos. The logos are a list. With auto-scroll on, a second copy of the logos closes the loop; it is aria-hidden and inert, so screen readers read each logo once and the copy's links are not in the tab order. Translate the pause button with data-pause-label and data-play-label attributes, which go on the <section>.
• Dark mode. For a logo with both light and dark images, CSS shows the dark image when an ancestor has data-bs-theme="dark", data-theme="dark" or one of the classes dark-theme, theme-dark or osirion-theme-dark, and follows prefers-color-scheme when the <html> element has no theme attribute.
• Links. Logo links open in a new tab with rel="nofollow noopener" unless the logo says otherwise. Url is written as given, so pass only URLs you trust.
• Images load lazily and cannot be dragged as files, so dragging moves the row.

Styling

The heading and the pause button use the theme's --osirion-text-primary, --osirion-background and font size tokens, and the focus ring uses --osirion-focus-ring-width and --osirion-focus-ring-color. Below 768px, logo slots shrink to 160px wide.

Related

• Testimonial carousel
• Carousels