Carousel
A carousel with motion and swipe built using scroll snapping.
Installation
dotnet add package Lumeo
One-time app setup (AddLumeo(), CSS & JS) is covered in the
installation guide.
Usage
@using Lumeo <Carousel />
When to Use
- Image galleries and product photo showcases
- Testimonial sliders and customer review rotations
- Onboarding flows and feature highlight walkthroughs
- Product showcases where multiple items share limited horizontal space
1
2
3
4
5
1
2
3
4
5
Pick a value to see it applied live.
1
2
3
4
Electronics
Wireless Headphones
$79.99
Accessories
Leather Wallet
$34.99
Footwear
Running Shoes
$119.99
Kitchen
Coffee Mug
$14.99
API Reference
Carousel
| Prop | Type | Default | Description |
|---|---|---|---|
| ChildContent | RenderFragment? | null | The carousel content (CarouselContent, CarouselPrevious, CarouselNext). |
| Orientation | Lumeo.Orientation | Horizontal | Scroll direction. Values: Horizontal, Vertical. |
| Loop | bool | false | Whether the carousel wraps around at the ends. |
| Disabled | bool | false | Disables navigation, keyboard interactions, and the prev/next buttons. |
| Class | string? | null | Additional CSS classes. |
| AdditionalAttributes | Dictionary<string, object>? | null | Additional HTML attributes. |
CarouselContent
| Prop | Type | Default | Description |
|---|---|---|---|
| ChildContent | RenderFragment? | null | The carousel items. |
| Class | string? | null | Additional CSS classes. |
| AdditionalAttributes | Dictionary<string, object>? | null | Additional HTML attributes. |
CarouselItem
| Prop | Type | Default | Description |
|---|---|---|---|
| ChildContent | RenderFragment? | null | The slide content. |
| Index | int? | null | Zero-based index of this slide (auto-assigned if omitted). |
| Total | int? | null | Optional total count used for aria-label announcements. |
| Class | string? | null | Additional CSS classes. |
| AdditionalAttributes | Dictionary<string, object>? | null | Additional HTML attributes. |
CarouselPrevious
| Prop | Type | Default | Description |
|---|---|---|---|
| Class | string? | null | Additional CSS classes. |
| AdditionalAttributes | Dictionary<string, object>? | null | Additional HTML attributes. Automatically disables when at the start. |
CarouselNext
| Prop | Type | Default | Description |
|---|---|---|---|
| Class | string? | null | Additional CSS classes. |
| AdditionalAttributes | Dictionary<string, object>? | null | Additional HTML attributes. Automatically disables when at the end. |
Related Components
- Tabs — For switching between distinct content panels without sliding
- ScrollArea — For scrollable content areas with custom scrollbars