Ant Design Blazor
Carousel
A carousel component. Scales with its container.
When To Use
- When there is a group of content on the same level.
- When there is insufficient content space, it can be used to save space in the form of a revolving door.
- Commonly used for a group of pictures/cards.
Examples
Basic usage.
Timing of scrolling to the next card/picture.
User provides custom buttons for navigation
Carousel API#
| Property | Description | Type | Default Value |
|---|---|---|---|
| ChildContent | ParameterContent of the carousel. Typically CarouselSlick elements |
RenderFragment | -- |
| DotPosition | ParameterThe position of the dots, which can be one of Top, Bottom, Left or Right, CarouselDotPosition |
String | -- |
| Autoplay | ParameterWhether to scroll automatically | TimeSpan | -- |
| Effect | ParameterTransition effect, CarouselEffect |
String | -- |
| Dots | Parameter | Boolean | -- |
| DotsClass | Parameter | String | -- |
| Id | ParameterID for the component's HTML | String | Uniquely Generated ID |
| Class | ParameterSpecifies one or more class names for an DOM element. | String | -- |
| Style | ParameterSpecifies an inline style for a DOM element. | String | -- |
| RefBack | ParameterA ForwardRef instance. You can get a reference to the internal DOM by using AntDesign.ForwardRef.Current. |
ForwardRef | -- |
| Method Signature | Return Type | Description |
|---|---|---|
| Next() | void | Slides the carousel to the next slide |
| Previous() | void | Slides the carousel to the previous slide |
| GoTo(Int32 index) | void | Slides the carousel to the specified slide |
CarouselSlick API#
| Property | Description | Type | Default Value |
|---|---|---|---|
| ChildContent | ParameterContent to display when on this part of the carousel | RenderFragment | -- |
| Id | ParameterID for the component's HTML | String | Uniquely Generated ID |
| RefBack | ParameterA ForwardRef instance. You can get a reference to the internal DOM by using AntDesign.ForwardRef.Current. |
ForwardRef | -- |