Demos GitHub

RadzenCarousel Class

A carousel/slideshow component for cycling through content items (images, cards, or custom content) with navigation and paging controls. RadzenCarousel displays one item at a time with automatic or manual advancement and various navigation options. Perfect for image galleries, product showcases, hero sections, or any content that benefits from sequential presentation. Features automatic advancement with configurable interval, Previous/Next buttons with customizable icons and text, dot indicators or page numbers for direct item selection, infinite loop for continuous cycling from last to first item, keyboard control (Arrow keys for navigation, Page Up/Down for first/last), swipe gestures on touch devices, and customization of button styles, pager position (top/bottom/overlay), and navigation visibility. Items are defined using RadzenCarouselItem components. Each item can contain images, text, or complex layouts. Use Auto property to enable automatic cycling, and Interval to control slide duration.

Inheritance

Object

ComponentBase

RadzenComponent

RadzenCarousel

Implements

IComponent

IHandleEvent

IHandleAfterRender

Namespace: Radzen.Blazor

Assembly: Radzen.Blazor.dll

Syntax

public class RadzenCarousel : RadzenComponent, IComponent, IHandleEvent, IHandleAfterRender

Examples

Basic image carousel:

<RadzenCarousel Style="height: 400px;">
    <Items>
        <RadzenCarouselItem>
            <RadzenImage Path="images/slide1.jpg" Style="width: 100%; height: 100%; object-fit: cover;" />
        </RadzenCarouselItem>
        <RadzenCarouselItem>
            <RadzenImage Path="images/slide2.jpg" Style="width: 100%; height: 100%; object-fit: cover;" />
        </RadzenCarouselItem>
    </Items>
</RadzenCarousel>

Auto-play carousel with custom navigation:

<RadzenCarousel Auto="true" Interval="3000" AllowNavigation="true" PagerPosition="PagerPosition.Bottom">
    <Items>
        <RadzenCarouselItem>Slide 1 content</RadzenCarouselItem>
        <RadzenCarouselItem>Slide 2 content</RadzenCarouselItem>
        <RadzenCarouselItem>Slide 3 content</RadzenCarouselItem>
    </Items>
</RadzenCarousel>

Constructors

RadzenCarousellink

A carousel/slideshow component for cycling through content items (images, cards, or custom content) with navigation and paging controls. RadzenCarousel displays one item at a time with automatic or manual advancement and various navigation options. Perfect for image galleries, product showcases, hero sections, or any content that benefits from sequential presentation. Features automatic advancement with configurable interval, Previous/Next buttons with customizable icons and text, dot indicators or page numbers for direct item selection, infinite loop for continuous cycling from last to first item, keyboard control (Arrow keys for navigation, Page Up/Down for first/last), swipe gestures on touch devices, and customization of button styles, pager position (top/bottom/overlay), and navigation visibility. Items are defined using RadzenCarouselItem components. Each item can contain images, text, or complex layouts. Use Auto property to enable automatic cycling, and Interval to control slide duration.

Declaration
public RadzenCarousel()

Properties

AllowNavigationlink

Gets or sets a value indicating whether previous/next navigation is allowed. Set to true by default.

Declaration
public bool AllowNavigation { get; set; }
Property Value
Type Description
boolGets or sets a value indicating whether previous/next navigation is allowed. Set to true by default.

AllowPaginglink

Gets or sets a value indicating whether paging is allowed. Set to true by default.

Declaration
public bool AllowPaging { get; set; }
Property Value
Type Description
boolGets or sets a value indicating whether paging is allowed. Set to true by default.

AnimationDurationlink

Gets or sets the slide transition animation duration in milliseconds. When null (default), the browser's native smooth scroll is used. Use 0 for instant transitions with no animation, or a positive value for a custom duration.

Declaration
public double? AnimationDuration { get; set; }
Property Value
Type Description
double?Gets or sets the slide transition animation duration in milliseconds. When null (default), the browser's native smooth scroll is used. Use 0 for instant transitions with no animation, or a positive value for a custom duration.

Autolink

Gets or sets a value indicating whether this RadzenCarousel cycle is automatic.

Declaration
public bool Auto { get; set; }
Property Value
Type Description
boolGets or sets a value indicating whether this RadzenCarousel cycle is automatic.

ButtonShadelink

Gets or sets the color shade of the buttons.

Declaration
public Shade ButtonShade { get; set; }
Property Value
Type Description
ShadeGets or sets the color shade of the buttons.

ButtonSizelink

Gets or sets the buttons size.

Declaration
public ButtonSize ButtonSize { get; set; }
Property Value
Type Description
ButtonSizeGets or sets the buttons size.

ButtonStylelink

Gets or sets the buttons style

Declaration
public ButtonStyle ButtonStyle { get; set; }
Property Value
Type Description
ButtonStyleGets or sets the buttons style

ButtonVariantlink

Gets or sets the design variant of the buttons.

Declaration
public Variant ButtonVariant { get; set; }
Property Value
Type Description
VariantGets or sets the design variant of the buttons.

Changelink

Gets or sets the change callback.

Declaration
public EventCallback<int> Change { get; set; }
Property Value
Type Description
EventCallback<int>Gets or sets the change callback.

Intervallink

Gets or sets the auto-cycle interval in milliseconds.

Declaration
public double Interval { get; set; }
Property Value
Type Description
doubleGets or sets the auto-cycle interval in milliseconds.

Itemslink

Gets or sets the items.

Declaration
public RenderFragment Items { get; set; }
Property Value
Type Description
RenderFragmentGets or sets the items.

NextIconlink

Gets or sets the next button icon.

Declaration
public string NextIcon { get; set; }
Property Value
Type Description
stringGets or sets the next button icon.

NextTextlink

Gets or sets the next button text.

Declaration
public string NextText { get; set; }
Property Value
Type Description
stringGets or sets the next button text.

PagerButtonAriaLabelFormatlink

Gets or sets the pager button aria-label format. Use {0} for the 1-based slide index.

Declaration
public string PagerButtonAriaLabelFormat { get; set; }
Property Value
Type Description
stringGets or sets the pager button aria-label format. Use {0} for the 1-based slide index.

PagerOverlaylink

Gets or sets a value indicating whether pager overlays the carousel items. Set to true by default.

Declaration
public bool PagerOverlay { get; set; }
Property Value
Type Description
boolGets or sets a value indicating whether pager overlays the carousel items. Set to true by default.

PagerPositionlink

Gets or sets the pager position. Set to PagerPosition.Bottom by default.

Declaration
public PagerPosition PagerPosition { get; set; }
Property Value
Type Description
PagerPositionGets or sets the pager position. Set to PagerPosition.Bottom by default.

PrevIconlink

Gets or sets the previous button icon.

Declaration
public string PrevIcon { get; set; }
Property Value
Type Description
stringGets or sets the previous button icon.

PrevTextlink

Gets or sets the previous button text.

Declaration
public string PrevText { get; set; }
Property Value
Type Description
stringGets or sets the previous button text.

SelectedIndexlink

Gets or sets the selected index.

Declaration
public int SelectedIndex { get; set; }
Property Value
Type Description
intGets or sets the selected index.

SelectedIndexChangedlink

Gets or sets the selected index changed callback.

Declaration
public EventCallback<int> SelectedIndexChanged { get; set; }
Property Value
Type Description
EventCallback<int>Gets or sets the selected index changed callback.

Methods

AddItemlink

Adds the item.

Declaration
public void AddItem(RadzenCarouselItem item)
Parameters
Type Name Description
RadzenCarouselItem item The item.

BuildRenderTreelink

Declaration
protected override void BuildRenderTree(Rendering.RenderTreeBuilder __builder)
Parameters
Type Name Description
Rendering.RenderTreeBuilder __builder

Disposelink

Declaration
public override void Dispose()

GetComponentCssClasslink

Declaration
protected override string GetComponentCssClass()
Returns
Type Description
string

Navigatelink

Navigates to specific index.

Declaration
public Task Navigate(int index)
Parameters
Type Name Description
int index
Returns
Type Description
Task

OnAfterRenderAsynclink

Declaration
protected override Task OnAfterRenderAsync(bool firstRender)
Parameters
Type Name Description
bool firstRender
Returns
Type Description
Task

RemoveItemlink

Removes the item.

Declaration
public void RemoveItem(RadzenCarouselItem item)
Parameters
Type Name Description
RadzenCarouselItem item The item.

Resetlink

Resets the auto-cycle timer.

Declaration
public Task Reset()
Returns
Type Description
Task

SetParametersAsynclink

Declaration
public override Task SetParametersAsync(ParameterView parameters)
Parameters
Type Name Description
ParameterView parameters
Returns
Type Description
Task

Startlink

Starts the auto-cycle timer.

Declaration
public void Start()

Stoplink

Stops the auto-cycle timer.

Declaration
public void Stop()
An error has occurred. This app may no longer respond until reloaded. Reload 🗙