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

Dark variant

Events

Slide count: 0

Programatic control

API

Parameters

Name Type Description
ChildContent RenderFragment Content of the carousel.
CssClass string Carousel CSS class. Added to root div .carousel.
Controls bool Display controls to switch between slides.
Indicators bool Display indicators showing which slide is active. Can also be used to switch between slides.
Dark bool Show controls, captions, etc. to dark colors.
Crossfade bool Animate slides with a fade transition instead of slide.
Interval int? Delay for automatically switching slides. Default is 3000 ms.
TouchSwiping bool Enable or disable swiping left/right on touchscreen devices to move between slides. Default is true (enabled).
Ride CarouselRide Carousel ride (autoplay) behavior. Default is CarouselRide.Carousel (autoplays the carousel on load).

Event Callbacks

Name Type Description
OnSlide EventCallback Is fired when the current slide is changed (at the very start of the sliding transition).
OnSlid EventCallback Is fired when the current slide is changed (once the transition is completed).

Methods

Method Returns Description
SlideToAsync(int index) Task Slides to an element with the coresponding index.
SlideToPreviousItemAsync() Task Slides to the previous item (to the left).
SlideToNextItemAsync() Task Slides to the next item (to the right).
CycleAsync() Task Start cycling between slides.
PauseAsync() Task Pause cycling.
An unhandled error has occurred. Reload 🗙