Osirion.Blazor Core has two carousels for marketing pages: a strip of client or partner logos, and a rail of testimonial cards. Both render every item as HTML under static server-side rendering and move with a CSS animation. A small script adds dragging, horizontal wheel scrolling and a pause button.
| Component | What it shows | Moves by default |
|---|---|---|
| InfiniteLogoCarousel | Logos, optionally linked, with light and dark variants | No, set EnableAutoScroll |
| OsirionTestimonialCarousel | Testimonial cards with name, role, quote and rating | Yes |
What they share
- Setup. The enhancement script loads through the BlazorJSComponents package, which Osirion.Blazor.Core
references. Register its services once in
Program.cs:builder.Services.AddJSComponents();. - Your own items. Pass your logos or testimonials. Without them, both components show built-in sample content meant for demos.
- Motion. The animation pauses while the pointer is over the carousel (unless
PauseOnHoveris off) and while keyboard focus is inside it. While the carousel animates, the script adds a pause button, and it runs its per-frame work only while the carousel is on screen and moving. Vertical wheel scrolling always reaches the page. - Reduced motion. Under
prefers-reduced-motion: reducethe animation stops; the testimonial carousel then shows its cards as a static wrapped grid. - Looping copies. The items repeated to close the loop are
aria-hiddenandinert, so screen readers read each item once and their links are not in the tab order. - Labels. Each carousel is a
<section>named bySectionTitle. The pause button's labels default to "Pause animation" and "Play animation"; setdata-pause-labelanddata-play-labelattributes on the component to translate them.
Related
Related Articles
