HxCarousel #
A slideshow component for cycling through elements—images or slides of text—like a carousel.
Always set one of the items as
Active="true", otherwise the carousel won't show at all.
Slides only #
Controls #
Indicators #
Captions #
Crossfade #
Individual interval #
With the Interval parameter, you can set the amount of time to delay (ms) between automatically cycling to the next item.
Disable automatic sliding #
If you want to disable automatic sliding, set the Ride="CarouselRide.False" parameter.
Disable touch swiping #
Disable pausing on hover #
Set Pause="CarouselPause.False" to disable pausing the carousel on mouseenter.
By default (Pause="CarouselPause.Hover"), the carousel pauses the cycling on mouseenter and resumes the cycling on mouseleave.
Dark variant #
Events #
Slide count: 0
Programmatic control #
API #
Parameters #
| Name | Type | Description |
|---|---|---|
| ChildContent | RenderFragment |
Content of the carousel. |
| Controls | bool |
Display controls to switch between slides. |
| Crossfade | bool |
Animate slides with a fade transition instead of sliding. |
| CssClass | string |
Carousel CSS class. Added to root div .carousel. |
| Dark | bool |
Show controls, captions, etc. with dark colors. |
| Indicators | bool |
Display indicators showing which slide is active. Can also be used to switch between slides. |
| Interval | int? |
Delay for automatically switching slides. Default is 3000 ms. |
| Pause | CarouselPause |
Carousel pause behavior. Default is CarouselPause.Hover (carousel will stop sliding on hover). |
| Ride | CarouselRide |
Carousel ride (autoplay) behavior. Default is CarouselRide.Carousel (autoplays the carousel on load). |
| TouchSwiping | bool |
Enable or disable swiping left/right on touchscreen devices to move between slides.
Default is true (enabled). |
Event callbacks #
| Name | Type | Description |
|---|---|---|
| OnSlid | EventCallback<CarouselSlideEventArgs> |
Is fired when the current slide is changed (once the transition is completed). |
| OnSlide | EventCallback<CarouselSlideEventArgs> |
Is fired when the current slide is changed (at the very start of the sliding transition). |
Methods #
| Method | Returns | Description |
|---|---|---|
| CycleAsync() | Task |
Start cycling between slides. |
| PauseAsync() | Task |
Pause cycling. |
| SlideToAsync(int index) | Task |
Slides to an element with the corresponding index. |
| SlideToNextItemAsync() | Task |
Slides to the next item (to the right). |
| SlideToPreviousItemAsync() | Task |
Slides to the previous item (to the left). |