CarouselExample.razor

@namespace MudBlazor.Docs.Examples

<MudCarousel Class="mud-width-full" Style="height:200px;" ShowArrows="@arrows" ShowBullets="@bullets" EnableSwipeGesture="@enableSwipeGesture" AutoCycle="@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-Checked="@arrows" Color="Color.Primary">Show Arrows</MudSwitch>
<MudSwitch @bind-Checked="@bullets" Color="Color.Primary">Show Bullets</MudSwitch>
<MudSwitch @bind-Checked="@enableSwipeGesture" Color="Color.Primary">Enable Swap Gesture</MudSwitch>
<MudSwitch @bind-Checked="@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;
}