Examples
Items keep their natural width and snap to the start.
website/Examples/DataDisplay/CarouselBasicExample.razor
Source
Snap centres each stop; Width sizes the items so the next one peeks in.
production
Billing API
staging
Customer portal
dev
Admin dashboard
production
Mobile app
website/Examples/DataDisplay/CarouselSnapExample.razor
Source
Vertical stacks the items and scrolls up and down; give the carousel a height.
website/Examples/DataDisplay/CarouselVerticalExample.razor
Source
API
<Carousel>
DaisyBlazorParameters
- Snap CarouselSnap= CarouselSnap.None
Scroll-snap alignment for carousel items. None (default), Center, or End.
- Vertical bool= false
When true renders a vertical carousel (.carousel-vertical); horizontal by default.
- Class string= null
Extra CSS classes merged onto the root element.
- Style string= null
Inline CSS styles applied to the root element.
Content
- ChildContent RenderFragment
Child content; should consist of CarouselItem components.
<CarouselItem>
DaisyBlazorParameters
- Width string= null
CSS width for the item (e.g. "100%", "300px"); applied as inline style.
- Class string= null
Extra CSS classes added to the carousel item.
- Style string= null
Inline CSS style appended after the width.
Content
- ChildContent RenderFragment
Child content rendered inside the carousel item.