InfiniteLogoCarousel

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.

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

@using Osirion.Blazor.Components

@* Sample logos from the example's own files; pass your own images in a real page *@
<InfiniteLogoCarousel SectionTitle="Sample logos"
                      CustomLogos="logos"
                      LogoWidth="160"
                      LogoHeight="64" />

@code {
    private static readonly LogoItem[] logos =
    [
        new("/favicon.png", "A round purple badge with a leaf rising from a cupped hand"),
        new("/images/osirion-hero.png", "A browser window showing the Blazor logo, on a purple background",
            Url: "https://github.com/demonjic/Osirion.Blazor"),
        new("/favicon.png", "A round purple badge with a leaf rising from a cupped hand", EnableGrayscale: false)
    ];
}

Usage

The enhancement script 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 logos. Without CustomLogos, the component shows built-in sample logos that load from external addresses (cdn.tridesetri.com and placehold.co) and link to other sites.

@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. A Url that is not a path on the site or an absolute http, https or mailto address, such as a javascript: or data: URL, is not written: the logo shows without a link.
• 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