www.radzen.com

Radzen Blazor Components

API Reference

Blazor Carousel

The Blazor Carousel cycles through content - images or any markup - with navigation arrows and paging.

Selected index

Interval

Animation duration

Items per page

Auto-cycle

Navigate

Contact

Employee
Steven Buchanan
Company
Vins et alcools Chevalier

Delivery Information

Address
59 rue de l'Abbaye, Reims, France
Ship name
Vins et alcools Chevalier

Order 10248 Details
$32.38

Quantity
Order Date
Discount

12 07/04/2023 0.00 %
10 07/04/2023 0.00 %
5 07/04/2023 0.00 %
Contact

Employee
Michael Suyama
Company
Toms Spezialitäten

Delivery Information

Address
Luisenstr. 48, Münster, Germany
Ship name
Toms Spezialitäten

Order 10249 Details
$11.61

Quantity
Order Date
Discount

9 07/05/2023 0.00 %
40 07/05/2023 0.00 %
Contact

Employee
Margaret Peacock
Company
Hanari Carnes

Delivery Information

Address
Rua do Paço, 67, Rio de Janeiro, Brazil
Ship name
Hanari Carnes

Order 10250 Details
$65.83

Quantity
Order Date
Discount

10 07/08/2023 0.00 %
35 07/08/2023 15.00 %
15 07/08/2023 15.00 %
Contact

Employee
Janet Leverling
Company
Victuailles en stock

Delivery Information

Address
2, rue du Commerce, Lyon, France
Ship name
Victuailles en stock

Order 10251 Details
$41.34

Quantity
Order Date
Discount

6 07/08/2023 5.00 %
15 07/08/2023 5.00 %
20 07/08/2023 0.00 %
Contact

Employee
Margaret Peacock
Company
Suprêmes délices

Delivery Information

Address
Boulevard Tirou, 255, Charleroi, Brazil
Ship name
Suprêmes délices

Order 10252 Details
$51.30

Quantity
Order Date
Discount

40 07/09/2023 5.00 %
25 07/09/2023 5.00 %
40 07/09/2023 0.00 %
Contact

Employee
Janet Leverling
Company
Hanari Carnes

Delivery Information

Address
Rua do Paço, 67, Rio de Janeiro, Brazil
Ship name
Hanari Carnes

Order 10253 Details
$58.17

Quantity
Order Date
Discount

20 07/10/2023 0.00 %
42 07/10/2023 0.00 %
40 07/10/2023 0.00 %
Contact

Employee
Steven Buchanan
Company
Chop-suey Chinese

Delivery Information

Address
Hauptstr. 31, Bern, Switzerland
Ship name
Chop-suey Chinese

Order 10254 Details
$22.98

Quantity
Order Date
Discount

15 07/11/2023 15.00 %
21 07/11/2023 15.00 %
21 07/11/2023 0.00 %
Contact

Employee
Anne Dodsworth
Company
Richter Supermarkt

Delivery Information

Address
Starenweg 5, Genève, Switzerland
Ship name
Richter Supermarkt

Order 10255 Details
$148.33

Quantity
Order Date
Discount

20 07/12/2023 0.00 %
35 07/12/2023 0.00 %
25 07/12/2023 0.00 %
30 07/12/2023 0.00 %
Contact

Employee
Janet Leverling
Company
Wellington Importadora

Delivery Information

Address
Rua do Mercado, 12, Resende, Brazil
Ship name
Wellington Importadora

Order 10256 Details
$13.97

Quantity
Order Date
Discount

15 07/15/2023 0.00 %
12 07/15/2023 0.00 %
Contact

Employee
Margaret Peacock
Company
HILARION-Abastos

Delivery Information

Address
Carrera 22 con Ave. Carlos Soublette #8-35, San Cristóbal, Venezuela
Ship name
HILARION-Abastos

Order 10257 Details
$81.91

Quantity
Order Date
Discount

25 07/16/2023 0.00 %
6 07/16/2023 0.00 %
15 07/16/2023 0.00 %

Console log

Multiple items per page Link to this section

Use ItemsPerPage to display multiple items at the same time.

Items per page

Auto-cycle

Navigation button styles Link to this section

Easily change the look and feel of next/prev navigation buttons via ButtonStyle, Shade, Variant, and Size.

Allow navigation

Buttons Style

Buttons Variant

Buttons Shade

Buttons Size

Navigation button content Link to this section

Use NextText="" and PrevText="" to add text to the next/prev navigation buttons. To change the icons, use NextIcon="" and PrevIcon="".

PrevText

PrevIcon

NextText

NextIcon

Paging Link to this section

You can disable the built-in paging via AllowPaging="false". PagerOverlay and PagerPosition help to position the pager according to your needs.

Allow paging

Pager Overlay

Pager Position

Data-binding Link to this section

Contact

Employee
Steven Buchanan
Company
Vins et alcools Chevalier

Delivery Information

Address
59 rue de l'Abbaye, Reims, France
Ship name
Vins et alcools Chevalier

Order 10248 Details
$32.38

Quantity
Order Date
Discount

12 07/04/2023 0.00 %
10 07/04/2023 0.00 %
5 07/04/2023 0.00 %
Contact

Employee
Michael Suyama
Company
Toms Spezialitäten

Delivery Information

Address
Luisenstr. 48, Münster, Germany
Ship name
Toms Spezialitäten

Order 10249 Details
$11.61

Quantity
Order Date
Discount

9 07/05/2023 0.00 %
40 07/05/2023 0.00 %
Contact

Employee
Margaret Peacock
Company
Hanari Carnes

Delivery Information

Address
Rua do Paço, 67, Rio de Janeiro, Brazil
Ship name
Hanari Carnes

Order 10250 Details
$65.83

Quantity
Order Date
Discount

10 07/08/2023 0.00 %
35 07/08/2023 15.00 %
15 07/08/2023 15.00 %
Contact

Employee
Janet Leverling
Company
Victuailles en stock

Delivery Information

Address
2, rue du Commerce, Lyon, France
Ship name
Victuailles en stock

Order 10251 Details
$41.34

Quantity
Order Date
Discount

6 07/08/2023 5.00 %
15 07/08/2023 5.00 %
20 07/08/2023 0.00 %
Contact

Employee
Margaret Peacock
Company
Suprêmes délices

Delivery Information

Address
Boulevard Tirou, 255, Charleroi, Brazil
Ship name
Suprêmes délices

Order 10252 Details
$51.30

Quantity
Order Date
Discount

40 07/09/2023 5.00 %
25 07/09/2023 5.00 %
40 07/09/2023 0.00 %
Contact

Employee
Janet Leverling
Company
Hanari Carnes

Delivery Information

Address
Rua do Paço, 67, Rio de Janeiro, Brazil
Ship name
Hanari Carnes

Order 10253 Details
$58.17

Quantity
Order Date
Discount

20 07/10/2023 0.00 %
42 07/10/2023 0.00 %
40 07/10/2023 0.00 %
Contact

Employee
Steven Buchanan
Company
Chop-suey Chinese

Delivery Information

Address
Hauptstr. 31, Bern, Switzerland
Ship name
Chop-suey Chinese

Order 10254 Details
$22.98

Quantity
Order Date
Discount

15 07/11/2023 15.00 %
21 07/11/2023 15.00 %
21 07/11/2023 0.00 %
Contact

Employee
Anne Dodsworth
Company
Richter Supermarkt

Delivery Information

Address
Starenweg 5, Genève, Switzerland
Ship name
Richter Supermarkt

Order 10255 Details
$148.33

Quantity
Order Date
Discount

20 07/12/2023 0.00 %
35 07/12/2023 0.00 %
25 07/12/2023 0.00 %
30 07/12/2023 0.00 %
Contact

Employee
Janet Leverling
Company
Wellington Importadora

Delivery Information

Address
Rua do Mercado, 12, Resende, Brazil
Ship name
Wellington Importadora

Order 10256 Details
$13.97

Quantity
Order Date
Discount

15 07/15/2023 0.00 %
12 07/15/2023 0.00 %
Contact

Employee
Margaret Peacock
Company
HILARION-Abastos

Delivery Information

Address
Carrera 22 con Ave. Carlos Soublette #8-35, San Cristóbal, Venezuela
Ship name
HILARION-Abastos

Order 10257 Details
$81.91

Quantity
Order Date
Discount

25 07/16/2023 0.00 %
6 07/16/2023 0.00 %
15 07/16/2023 0.00 %

Carousel with RadzenPager Link to this section

You can use the Carousel with RadzenPager component.

Contact

Employee
Steven Buchanan
Company
Vins et alcools Chevalier

Delivery Information

Address
59 rue de l'Abbaye, Reims, France
Ship name
Vins et alcools Chevalier

Order 10248 Details
$32.38

Quantity
Order Date
Discount

12 07/04/2023 0.00 %
10 07/04/2023 0.00 %
5 07/04/2023 0.00 %

Keyboard Navigation Link to this section

The following keys or key combinations provide a way for users to navigate and interact with Radzen Blazor Carousel component.

Press this key	To do this
Tab	Move focus to the carousel and to the focusable elements inside it.
LeftArrow	Navigate to the previous slide.
RightArrow	Navigate to the next slide.
Space or Enter	Activate the focused navigation or pager button.

Frequently asked questions

How do I build an image carousel in Blazor?

Add RadzenCarousel with item content; it cycles through items with navigation arrows and optional auto-cycle and paging.

Tabs Steps

All the tools in one place

Save Hours on Every Project

With Radzen Blazor subscription you get the full toolkit, including:

Dedicated support backed by proven expertise

Premium themes and theme editor

Ready-to-use UI blocks

Complete app templates

Visual design-time-experience

Start Free See Subscription Plans

On this page

Blazor Carousel

Multiple items per page Link to this section

Navigation button styles Link to this section

Navigation button content Link to this section

Paging Link to this section

Data-binding Link to this section

Carousel with RadzenPager Link to this section

Keyboard Navigation Link to this section

Frequently asked questions

How do I build an image carousel in Blazor?

Related

Save Hours on Every Project

Demos Configuration

Blazor Carousel

Multiple items per page linkLink to this section

Navigation button styles linkLink to this section

Navigation button content linkLink to this section

Paging linkLink to this section

Data-binding linkLink to this section

Carousel with RadzenPager linkLink to this section

Keyboard Navigation linkLink to this section

Frequently asked questions

How do I build an image carousel in Blazor?

Related

Radzen Blazor Newsletter

Save Hours on Every Project

Demos Configuration

Multiple items per page Link to this section

Navigation button styles Link to this section

Navigation button content Link to this section

Paging Link to this section

Data-binding Link to this section

Carousel with RadzenPager Link to this section

Keyboard Navigation Link to this section