Carousel

Demonstration and configuration of the Radzen Blazor Carousel component.

These demos showcase a slideshow carousel with customizable navigation button styles, custom icons and text for next/prev buttons, flexible paging configurations with overlay and position options, data-binding support, and integration with RadzenPager.

Selected index
Interval
Auto-cycle
Navigate

Console log

Navigation button styles link

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

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

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

Carousel with RadzenPager link

You can use the Carousel with RadzenPager component.

✨ 오늘의 명언 & 마음의 양식

“배우고 때때로 익히면 또한 기쁘지 아니한가.”

— 논어 (고전 명언)
On this page

Demos Configuration

Premium Themes

  • Material 3
  • Material 3 Dark
  • Fluent
  • Fluent Dark

Free Themes

  • Material
  • Material Dark
  • Standard
  • Standard Dark
  • Default
  • Dark
  • Humanistic
  • Humanistic Dark
  • Software
  • Software Dark
An error has occurred. This app may no longer respond until reloaded. Reload 🗙