ComponentsData display
Carousel
Slides shown one at a time with arrows, bullets, swipe and optional auto-cycling. Use it for a handful of related highlights; anything people must read or compare belongs on the page instead, where nothing moves away.
Basic carousel
MudCarouselItem children become slides. Give the carousel a height; each slide fills it. Arrows, bullets, swipe and auto-cycling are on by default; this one turns auto-cycling off.
Auto-cycling with a pause control
AutoCycle advances every AutoCycleTime. Moving content needs a way to stop it, so the button pauses and resumes, and SelectedIndex reports the slide on screen.
Notice 1 of 3
Transitions
Each item chooses Slide, Fade or None. Custom takes your own CSS classes for entering and leaving; here MudBlazor's fade-in is paired with its slide-out.
Custom bullets and your own buttons
BulletTemplate receives whether its slide is selected. Templates (including PreviousButtonTemplate and NextButtonTemplate) render inside plain divs rather than buttons, so this example draws the marks with the template and navigates with real buttons bound to SelectedIndex.
Exhibit 1 of 3
Data-bound slides
ItemsSource with an ItemTemplate builds slides from data. Bind SelectedIndex to jump to a slide, and adding or removing items updates the carousel.
Tonight's sky, in SVG
Slides built from inline SVG drawn with theme colors, so they follow light and dark mode and need no image files. Each drawing has a text alternative.
Waxing gibbous Moon
Craters along the shadow line stand out best through binoculars.
Playground
Change the navigation, timing and transition; the markup lists only the values that differ from the defaults.
<MudCarousel TData="object" AutoCycle="false" Style="height: 200px">
<MudCarouselItem Color="Color.Primary">…</MudCarouselItem>
…
</MudCarousel>