HxCarousel

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

Slides only

Controls

Indicators

Captions

Crossfade

Individual HxCarouselItem interval

With 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 parameter Interval to null.

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

Programatic 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 slide.
CssClass string Carousel CSS class. Added to root div .carousel.
Dark bool Show controls, captions, etc. to 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 coresponding 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 🗙