Example
Default implementation.
<MudCarousel Class="mud-width-full" Style="height:200px;" ShowArrows="" ShowBullets="" EnableSwipeGesture="" AutoCycle="" TData="object"> <MudCarouselItem Transition="transition" Color="@Color.Primary"> <div class="d-flex" style="height:100%"> <MudIcon Class="mx-auto my-auto" Icon="@Icons.Custom.Brands.MudBlazor" Size="@Size.Large" /> </div> </MudCarouselItem> <MudCarouselItem Transition="transition" Color="@Color.Secondary"> <div class="d-flex" style="height:100%"> <MudIcon Class="mx-auto my-auto" Icon="@Icons.Custom.Brands.MudBlazor" Size="@Size.Large" /> </div> </MudCarouselItem> <MudCarouselItem Transition="transition"> <div class="d-flex" style="height:100%"> <MudIcon Class="mx-auto my-auto" Icon="@Icons.Custom.Brands.MudBlazor" Color="@Color.Primary" Size="@Size.Large" /> </div> </MudCarouselItem> </MudCarousel> <MudSelect @bind-Value="transition" Label="Transition" Class="ma-2"> <MudSelectItem Value="@Transition.Fade">Fade</MudSelectItem> <MudSelectItem Value="@Transition.Slide">Slide</MudSelectItem> <MudSelectItem Value="@Transition.None">None</MudSelectItem> </MudSelect> <MudSwitch @bind-Value="arrows" Color="Color.Primary">Show Arrows</MudSwitch> <MudSwitch @bind-Value="bullets" Color="Color.Primary">Show Bullets</MudSwitch> <MudSwitch @bind-Value="enableSwipeGesture" Color="Color.Primary">Enable Swap Gesture</MudSwitch> <MudSwitch @bind-Value="autocycle" Color="Color.Primary">Auto Cycle (Default: 5 secs)</MudSwitch>
@code{ private bool arrows = true; private bool bullets = true; private bool enableSwipeGesture = true; private bool autocycle = true; private Transition transition = Transition.Slide; }
DataBinding
You can One-Way Bind any IEnumerable list to the ItemsSource attribute, and use a template to show the data.
You can also Two-Way Bind the SelectedIndex to read or write the current position.
<MudCarousel Class="mud-width-full" @ref="_carousel" ItemsSource="@_source" @bind-SelectedIndex="selectedIndex" Style="height:200px;" ShowArrows="@_arrows" ShowBullets="@_bullets" EnableSwipeGesture="@_enableSwipeGesture" AutoCycle="@_autocycle"> <ItemTemplate> <div class="d-flex flex-column flex-column justify-center" style="height:100%"> <MudIcon Class="mx-auto" Icon="@Icons.Custom.Brands.MudBlazor" Size="@Size.Large" /> <MudText Align="@Align.Center" Class="mx-auto">@context</MudText> </div> </ItemTemplate> </MudCarousel> <MudSwitch @bind-Value="_arrows" Color="Color.Primary">Show Arrows</MudSwitch> <MudSwitch @bind-Value="_bullets" Color="Color.Primary">Show Bullets</MudSwitch> <MudSwitch @bind-Value="_enableSwipeGesture" Color="Color.Primary">Enable Swap Gesture</MudSwitch> <MudSwitch @bind-Value="_autocycle" Color="Color.Primary">Auto Cycle (Default: 5 secs)</MudSwitch> <br /> <MudButton Class="ma-2" Variant="Variant.Filled" Color="Color.Primary" OnClick="AddAsync">Add</MudButton> <MudButton Class="ma-2" Variant="Variant.Filled" Color="Color.Error" OnClick="@(async () => await DeleteAsync(_carousel.SelectedIndex))">Delete</MudButton> <MudSelect @bind-Value="selectedIndex" Label="@($"Selected Item (index: {selectedIndex})")"> @{ int index = 0; foreach (var item in _source) { <MudSelectItem Value="">@item</MudSelectItem> index++; } } </MudSelect>
@code { private MudCarousel<string> _carousel; private bool _arrows = true; private bool _bullets = true; private bool _enableSwipeGesture = true; private bool _autocycle = true; private IList<string> _source = new List<string>() { "Item 1", "Item 2", "Item 3", "Item 4", "Item 5" }; private int selectedIndex = 2; private async Task AddAsync() { _source.Add($"Item {_source.Count + 1}"); await Task.Delay(1); _carousel.MoveTo(_source.Count - 1); } private async Task DeleteAsync(int index) { if (_source.Any()) { _source.RemoveAt(index); await Task.Delay(1); _carousel.MoveTo(System.Math.Max(System.Math.Min(index, _source.Count - 1), 0)); } } }