# Carousel

Source: https://lumeo.nativ.sh/components/carousel

# Carousel

A carousel with motion and swipe built using scroll snapping.

## Installation

.NET CLI PackageReference Lumeo CLI

dotnet add package Lumeo

One-time app setup (`AddLumeo()`, CSS & JS) is covered in the [installation guide](docs/introduction).

## 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

Preview Code

Default

1

2

3

4

5

Previous slide Next slide

Preview Code

With Loop

1

2

3

4

5

Previous slide Next slide

Preview Code

Orientation — interactive

Pick a value to see it applied live.

HorizontalVertical

1

2

3

4

Previous slide Next slide

Preview Code

Product Gallery

Electronics

Wireless Headphones

$79.99

Accessories

Leather Wallet

$34.99

Footwear

Running Shoes

$119.99

Kitchen

Coffee Mug

$14.99

Previous slide Next slide

## 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](/components/tabs) — For switching between distinct content panels without sliding
-   [ScrollArea](/components/scroll-area) — For scrollable content areas with custom scrollbars