Class RadzenCarousel

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

IDisposable

Inherited Members

RadzenComponent.OnMouseEnter()

RadzenComponent.OnMouseLeave()

RadzenComponent.OnContextMenu(MouseEventArgs)

RadzenComponent.GetCssClass()

RadzenComponent.GetId()

RadzenComponent.Debounce(Func<Task>, int)

RadzenComponent.OnInitialized()

RadzenComponent.RaiseContextMenu(MouseEventArgs)

RadzenComponent.RaiseMouseEnter()

RadzenComponent.AddContextMenu()

RadzenComponent.RaiseMouseLeave()

RadzenComponent.Attributes

RadzenComponent.Element

RadzenComponent.MouseEnter

RadzenComponent.MouseLeave

RadzenComponent.ContextMenu

RadzenComponent.Culture

RadzenComponent.DefaultCulture

RadzenComponent.Style

RadzenComponent.Visible

RadzenComponent.UniqueID

RadzenComponent.JSRuntime

RadzenComponent.IsJSRuntimeAvailable

RadzenComponent.Reference

RadzenComponent.CurrentStyle

ComponentBase.OnInitializedAsync()

ComponentBase.OnParametersSet()

ComponentBase.OnParametersSetAsync()

ComponentBase.StateHasChanged()

ComponentBase.ShouldRender()

ComponentBase.OnAfterRender(bool)

ComponentBase.InvokeAsync(Action)

ComponentBase.InvokeAsync(Func<Task>)

ComponentBase.DispatchExceptionAsync(Exception)

object.GetType()

object.MemberwiseClone()

object.ToString()

object.Equals(object)

object.Equals(object, object)

object.ReferenceEquals(object, object)

object.GetHashCode()

Namespace: Radzen.Blazor

Assembly: Radzen.Blazor.dll

Syntax

public class RadzenCarousel : RadzenComponent, IComponent, IHandleEvent, IHandleAfterRender, IDisposable

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

RadzenCarousel()

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

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>

Properties

AllowNavigation

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

Declaration

[Parameter]
public bool AllowNavigation { get; set; }

Property Value

Type	Description
bool	true if previous/next navigation is allowed; otherwise, false.

AllowPaging

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

Declaration

[Parameter]
public bool AllowPaging { get; set; }

Property Value

Type	Description
bool	true if paging is allowed; otherwise, false.

Auto

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

Declaration

[Parameter]
public bool Auto { get; set; }

Property Value

Type	Description
bool	true if cycle automatic; otherwise, false.

ButtonShade

Gets or sets the color shade of the buttons.

Declaration

[Parameter]
public Shade ButtonShade { get; set; }

Property Value

Type	Description
Shade	The color shade of the buttons.

ButtonSize

Gets or sets the buttons size.

Declaration

[Parameter]
public ButtonSize ButtonSize { get; set; }

Property Value

Type	Description
ButtonSize	The buttons size.

ButtonStyle

Gets or sets the buttons style

Declaration

[Parameter]
public ButtonStyle ButtonStyle { get; set; }

Property Value

Type	Description
ButtonStyle	The buttons style.

ButtonVariant

Gets or sets the design variant of the buttons.

Declaration

[Parameter]
public Variant ButtonVariant { get; set; }

Property Value

Type	Description
Variant	The variant of the buttons.

Change

Gets or sets the change callback.

Declaration

[Parameter]
public EventCallback<int> Change { get; set; }

Property Value

Type	Description
EventCallback<int>	The change callback.

Interval

Gets or sets the auto-cycle interval in milliseconds.

Declaration

[Parameter]
public double Interval { get; set; }

Property Value

Type	Description
double

Items

Gets or sets the items.

Declaration

[Parameter]
public RenderFragment Items { get; set; }

Property Value

Type	Description
RenderFragment	The items.

NextIcon

Gets or sets the next button icon.

Declaration

[Parameter]
public string NextIcon { get; set; }

Property Value

Type	Description
string	The next button icon.

NextText

Gets or sets the next button text.

Declaration

[Parameter]
public string NextText { get; set; }

Property Value

Type	Description
string	The next button text.

PagerOverlay

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

Declaration

[Parameter]
public bool PagerOverlay { get; set; }

Property Value

Type	Description
bool	true if pager overlay is allowed; otherwise, false.

PagerPosition

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

Declaration

[Parameter]
public PagerPosition PagerPosition { get; set; }

Property Value

Type	Description
PagerPosition	The pager position.

PrevIcon

Gets or sets the previous button icon.

Declaration

[Parameter]
public string PrevIcon { get; set; }

Property Value

Type	Description
string	The previous button icon.

PrevText

Gets or sets the previous button text.

Declaration

[Parameter]
public string PrevText { get; set; }

Property Value

Type	Description
string	The previous button text.

SelectedIndex

Gets or sets the selected index.

Declaration

[Parameter]
public int SelectedIndex { get; set; }

Property Value

Type	Description
int	The selected index.

SelectedIndexChanged

Gets or sets the selected index changed callback.

Declaration

[Parameter]
public EventCallback<int> SelectedIndexChanged { get; set; }

Property Value

Type	Description
EventCallback<int>	The selected index changed callback.

Methods

AddItem(RadzenCarouselItem)

Adds the item.

Declaration

public void AddItem(RadzenCarouselItem item)

Parameters

Type	Name	Description
RadzenCarouselItem	item	The item.

BuildRenderTree(RenderTreeBuilder)

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

protected override void BuildRenderTree(RenderTreeBuilder __builder)

Parameters

Type	Name	Description
RenderTreeBuilder	__builder

Overrides

ComponentBase.BuildRenderTree(RenderTreeBuilder)

Dispose()

Detaches event handlers and disposes Reference.

Declaration

public override void Dispose()

Overrides

RadzenComponent.Dispose()

GetComponentCssClass()

Gets the component CSS class.

Declaration

protected override string GetComponentCssClass()

Returns

Type	Description
string

Overrides

RadzenComponent.GetComponentCssClass()

Navigate(int)

Navigates to specific index.

Declaration

public Task Navigate(int index)

Parameters

Type	Name	Description
int	index

Returns

Type	Description
Task

OnAfterRenderAsync(bool)

Called by the Blazor runtime.

Declaration

protected override Task OnAfterRenderAsync(bool firstRender)

Parameters

Type	Name	Description
bool	firstRender

Returns

Type	Description
Task

Overrides

RadzenComponent.OnAfterRenderAsync(bool)

RemoveItem(RadzenCarouselItem)

Removes the item.

Declaration

public void RemoveItem(RadzenCarouselItem item)

Parameters

Type	Name	Description
RadzenCarouselItem	item	The item.

Reset()

Resets the auto-cycle timer.

Declaration

public Task Reset()

Returns

Type	Description
Task

SetParametersAsync(ParameterView)

Called by the Blazor runtime when parameters are set.

Declaration

public override Task SetParametersAsync(ParameterView parameters)

Parameters

Type	Name	Description
ParameterView	parameters	The parameters.

Returns

Type	Description
Task

Overrides

RadzenComponent.SetParametersAsync(ParameterView)

Start()

Starts the auto-cycle timer.

Declaration

public void Start()

Stop()

Stops the auto-cycle timer.

Declaration

public void Stop()

Implements

IComponent

IHandleEvent

IHandleAfterRender

IDisposable