HxCarousel #

A slideshow component for cycling through elements—images or slides of text—like a carousel.

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.
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).
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).

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).
An unhandled error has occurred. Reload 🗙